feat: HarfBuzz

README.md

@@ -183,14 +183,16 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 <tr><td><code>justifyContent</code></td><td>Supported</td><td></td></tr>
 <tr><td><code>gap</code></td><td>Supported</td><td></td></tr>
 
-<tr><td rowspan="5">Font</td></tr>
+<tr><td rowspan="6">Font</td></tr>
 <tr><td><code>fontFamily</code></td><td>Supported</td><td></td></tr>
 <tr><td><code>fontSize</code></td><td>Supported</td><td></td></tr>
 <tr><td><code>fontWeight</code></td><td>Supported</td><td></td></tr>
 <tr><td><code>fontStyle</code></td><td>Supported</td><td></td></tr>
+<tr><td><code>fontFeatureSettings</code></td><td>Supported via HarfBuzz text shaping. Enables OpenType features like ligatures, small caps, stylistic sets, etc.</td><td></td></tr>
 
-<tr><td rowspan="13">Text</td></tr>
+<tr><td rowspan="14">Text</td></tr>
 <tr><td><code>tabSize</code></td><td>Supported</td><td></td></tr>
+<tr><td><code>direction</code></td><td><code>ltr</code>, <code>rtl</code>, defaults to <code>ltr</code>. Used for RTL languages like Arabic and Hebrew.</td><td></td></tr>
 <tr><td><code>textAlign</code></td><td><code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>, default to <code>start</code></td><td></td></tr>
 <tr><td><code>textIndent</code></td><td>Supported, including negative values (hanging indent)</td><td></td></tr>
 <tr><td><code>textTransform</code></td><td><code>none</code>, <code>lowercase</code>, <code>uppercase</code>, <code>capitalize</code>, defaults to <code>none</code></td><td></td></tr>
@@ -307,9 +309,34 @@ Note:
 
 ### Language and Typography
 
-Advanced typography features such as kerning, ligatures and other OpenType features are not currently supported.
+**OpenType Features**: Satori now supports advanced typography features via HarfBuzz text shaping! Use the `font-feature-settings` CSS property to enable OpenType features such as:
+- Ligatures (`liga`, `dlig`, `hlig`)
+- Small caps (`smcp`, `c2sc`)
+- Stylistic sets (`ss01`-`ss20`)
+- Contextual alternates (`calt`)
+- Swashes (`swsh`, `cswh`)
+- And many more OpenType features
 
-RTL languages are not supported either.
+Example:
+```jsx
+<div style={{ fontFeatureSettings: '"smcp" 1, "liga" 0' }}>
+  This Text Uses Small Caps
+</div>
+```
+
+**RTL (Right-to-Left) Languages**: Satori now supports RTL languages like Arabic and Hebrew! Use the `direction` CSS property to enable RTL text rendering:
+
+```jsx
+<div style={{ direction: 'rtl' }}>
+  مرحبا بالعالم
+</div>
+
+<div style={{ direction: 'rtl' }}>
+  שלום עולם
+</div>
+```
+
+HarfBuzz automatically handles bidirectional text (BiDi) when mixing LTR and RTL content.
 
 #### Fonts
 

package.json

@@ -80,7 +80,6 @@
   "devDependencies": {
     "@resvg/resvg-js": "^2.1.0",
     "@types/node": "^16",
-    "@types/opentype.js": "^1.3.3",
     "@types/react": "^17.0.38",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
@@ -106,12 +105,14 @@
   },
   "dependencies": {
     "@shuding/opentype.js": "1.4.0-beta.0",
+    "fflate": "0.7.3",
     "css-background-parser": "^0.1.0",
     "css-box-shadow": "1.0.0-3",
     "css-gradient-parser": "^0.0.17",
     "css-to-react-native": "^3.0.0",
     "emoji-regex-xs": "^2.0.1",
     "escape-html": "^1.0.3",
+    "harfbuzzjs": "^0.10.0",
     "linebreak": "^1.1.0",
     "parse-css-color": "^0.2.1",
     "postcss-value-parser": "^4.2.0",
@@ -123,7 +124,8 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "yoga-layout@3.2.1": "patches/yoga-layout@3.2.1.patch"
+      "yoga-layout@3.2.1": "patches/yoga-layout@3.2.1.patch",
+      "harfbuzzjs@0.10.0": "patches/harfbuzzjs@0.10.0.patch"
     }
   }
 }