opentype.js
harfbuzzjs
| opentype.js | harfbuzzjs | |
|---|---|---|
| 4 | 2 | |
| 4,298 | 176 | |
| 0.9% | 5.7% | |
| 8.1 | 5.9 | |
| 10 days ago | about 2 months ago | |
| JavaScript | JavaScript | |
| MIT License | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
opentype.js
-
Wakamai Fondue, the tool that answers the question “what can my font do?”
[3] https://github.com/opentypejs/opentype.js
-
Social Media Cards with @vercel/og
With an SVG we can define our image as code, which is pretty neat. But SVG is not able to wrap texts. We can use opentype.js to calculate the width of our texts and to wrap it manually. Finally we have to convert the SVG to a PNG, because the most of social media platforms do not support SVG. This approach could work, but requires a lot of code and it is very complicated.
-
is there way to calculate the height of each letters?
The repo is public so you can take a look if you're curious. I used opentype.js to convert the font into SVG in real-time. It was a PITA.
-
I made a VSCode extension that lets you preview fonts in your editor
Still a few bugs to work out but I learned a ton making this! One of the cool things I learned is that you can read a font file, convert it to a base 64 string, slap it in a style element, and show that font in the browser! Huge thanks to opentype.js as well!
harfbuzzjs
-
3D and 2D: Testing out my cross-platform graphics engine
There is a well maintained Wasm build of harfbuzz: <https://github.com/harfbuzz/harfbuzzjs> with both OpenType and AAT shapers support, which should be enough but you can also provide your own shaper implementation in Wasm yes.
We're successfully using Wasm harfbuzz to render text in a web-based design tool with relatively high usage so there should be no issues integrating it :)
-
The Web Assembly Shaper
I was researching how to get a WASMified version of harfbuzz into my frontend 2d canvas library (because: text implementation in the 2D Canvas API is genuinely dire) when I discovered this issue had already been addressed back in 2019, when the guy who develops Photopea asked the question and got a positive answer - https://github.com/harfbuzz/harfbuzzjs/issues/10
What are some alternatives?
source-han-sans - Source Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕
wa-sqlite - WebAssembly SQLite with experimental support for browser storage extensions
glyphhanger - Your web font utility belt. It can subset web fonts. It can find unicode-ranges for you automatically. It makes julienne fries.
localpdfmerger - Merge PDFs, optimize PDFs, and extract Information like Images from PDF Files locally inside your Browser
satori - Enlightened library to convert HTML and CSS to SVG
webassemblyjs - Toolchain for WebAssembly
chiron-sans-hk - 昭源黑體：現代筆形風格，平衡標準字形和印刷體慣用筆形的免費開源黑體字型
harfbuzz - HarfBuzz text shaping engine
Warcraft-Font-Merger - Warcraft Font Merger，魔兽世界字体合并/补全工具。
sql.js - A javascript library to run SQLite on the web.
node-canvas - Node canvas is a Cairo backed Canvas implementation for NodeJS.
manifold - Geometry library for topological robustness