Add font feature settings section

docs/fonts.md

@@ -30,6 +30,33 @@ const styles = StyleSheet.create({
 
 ---
 
+### OpenType font features
+
+React-pdf supports the `fontFeatureSettings` style property to control OpenType font features, such as tabular numbers, small capitals, fractions, or ligatures.
+
+A common use case is enabling tabular numbers with `tnum`, so digits use equal widths and align nicely in tables, invoices, counters, or other numeric layouts.
+
+It accepts either an array of feature tags, which enables and appends them to the default font features, or an object to turn individual features on or off:
+
+```
+const styles = StyleSheet.create({
+  tabularNumbers: {
+    fontFeatureSettings: ['tnum'],
+  },
+  noLigatures: {
+    fontFeatureSettings: {
+      liga: 0,
+    },
+  },
+});
+```
+
+Feature availability depends on the registered font file. If a font does not contain a given OpenType feature, enabling it will have no visible effect.
+
+<GoToExample name="font-feature-settings" />
+
+---
+
 ### `register`
 
 Fonts really make the difference when it comes on styling a document. For obvious reasons, react-pdf cannot ship a wide amount of them. Here's a list of available font families that are supported out of the box:

examples/font-feature-settings.txt

@@ -0,0 +1,76 @@
+Font.register({
+  family: 'Inter',
+  fonts: [
+    {
+      src: `fonts/Inter-Regular.ttf`
+    }
+  ]
+})
+
+const styles = StyleSheet.create({
+  section: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '15pt',
+    marginBottom: 16
+  },
+  label: {
+    fontFamily: 'Inter',
+    fontSize: 10,
+    marginBottom: 4,
+    width: '100pt',
+  },
+  row: {
+    fontFamily: 'Inter',
+    fontSize: 16,
+    marginBottom: 2
+  },
+  tabularNumbers: {
+    fontFamily: 'Inter',
+    fontSize: 16,
+    marginBottom: 2,
+    fontFeatureSettings: ['tnum']
+  },
+  noKern: {
+    fontFamily: 'Inter',
+    fontSize: 16,
+    fontFeatureSettings: {
+      kern: 0
+    }
+  }
+})
+
+const MyDocument = () => (
+  <Document>
+    <Page>
+      <View style={styles.section}>
+        <Text style={styles.label}>Default numbers</Text>
+        <View>
+          <Text style={styles.row}>Invoice #111111 USD 1'111.11</Text>
+          <Text style={styles.row}>Invoice #888888 USD 8'888.88</Text>
+      	</View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.label}>Tabular numbers</Text>
+      	<View>
+          <Text style={styles.tabularNumbers}>Invoice #111111 USD 1'111.11</Text>
+          <Text style={styles.tabularNumbers}>Invoice #888888 USD 8'888.88</Text>
+    	</View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.label}>Kerning enabled</Text>
+        <Text style={styles.row}>AVAVAV Water Layer Drafts</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.label}>Kerning disabled</Text>
+        <Text style={styles.noKern}>AVAVAV Water Layer Drafts</Text>
+      </View>
+    </Page>
+  </Document>
+);
+
+ReactPDF.render(<MyDocument />);

pages/repl.js

@@ -57,6 +57,7 @@ const examples = {
   'disable-hyphenation': require('raw-loader!../examples/disable-hyphenation.txt'),
   'hyphenation-callback': require('raw-loader!../examples/hyphenation-callback.txt'),
   'breakable-unbreakable': require('raw-loader!../examples/breakable-unbreakable.txt'),
+  'font-feature-settings': require('raw-loader!../examples/font-feature-settings.txt'),
 };
 
 const NAV_WIDTH = 64;