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,32 @@ Note:
 
 ### Language and Typography
 
-Advanced typography features such as kerning, ligatures and other OpenType features are not currently supported.
+**OpenType Features**: Satori 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>
+```
 
 #### 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"
     }
   }
 }

playground/cards/playground-data.ts

@@ -312,7 +312,61 @@ const playgroundTabs: Tabs = {
       </div>
     </div>
   )
-}  
+}
+`,
+  'Advanced Shaping': `// Complex text shaping examples that require HarfBuzz.
+// Without proper shaping, these scripts would render incorrectly.
+
+() => {
+  function Label({ children }) {
+    return <label style={{
+      fontSize: 14,
+      fontWeight: 600,
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+      margin: '20px 0 8px',
+      color: '#666',
+    }}>
+      {children}
+    </label>
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        padding: '10px 25px',
+        fontFamily: 'Inter',
+        fontSize: 26,
+        backgroundColor: 'white',
+      }}
+    >
+      <Label>Arabic (RTL + Ligatures)</Label>
+      <div style={{ direction: 'rtl' }}>
+        السلام عليكم — لا إله إلا الله
+      </div>
+      <Label>Devanagari (Hindi conjuncts)</Label>
+      <div>
+        नमस्ते — हिन्दी — क्ष त्र ज्ञ श्री
+      </div>
+      <Label>Thai (complex clusters)</Label>
+      <div>
+        สวัสดี — ภาษาไทย — กรุงเทพฯ
+      </div>
+      <Label>Tamil</Label>
+      <div>
+        வணக்கம் — தமிழ் — ஸ்ரீ
+      </div>
+      <Label>Mixed RTL/LTR</Label>
+      <div style={{ direction: 'rtl' }}>
+        مرحبا Hello مع World السلام
+      </div>
+    </div>
+  )
+}
 `,
 }