feat: add font feature settings support

diegomura · May 5, 2024 · f33ad19 · f33ad19
1 parent ee126d6
commit f33ad19
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 2 deletions.
diff --git a/.changeset/six-paws-tie.md b/.changeset/six-paws-tie.md
@@ -0,0 +1,7 @@
+---
+"@react-pdf/textkit": minor
+"@react-pdf/layout": minor
+"@react-pdf/types": minor
+---
+
+Add support for fontFeatureSettings to customise ligatures, tabular number display, and other font features
diff --git a/packages/examples/src/fontFeatureSettings/index.jsx b/packages/examples/src/fontFeatureSettings/index.jsx
@@ -0,0 +1,81 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/jsx-sort-props: 0 */
+
+import { Document, Font, Page, StyleSheet, Text } from '@react-pdf/renderer';
+import React from 'react';
+
+import RobotoFont from '../../public/Roboto-Regular.ttf';
+import RubikFont from '../../public/Rubik-Regular.ttf';
+
+const styles = StyleSheet.create({
+  body: {
+    paddingTop: 35,
+    paddingBottom: 45,
+    paddingHorizontal: 35,
+    position: 'relative',
+    fontSize: 14,
+  },
+  headline: {
+    fontFamily: 'Roboto',
+    fontSize: '24',
+    paddingVertical: 12,
+  },
+  rubik: {
+    fontFamily: 'Rubik',
+  },
+  roboto: {
+    fontFamily: 'Roboto',
+  },
+  tabular: {
+    fontFeatureSettings: ['tnum'],
+  },
+  smallCapitals: {
+    fontFeatureSettings: ['smcp'],
+  },
+  disableCommonLigatures: {
+    fontFeatureSettings: { liga: 0 },
+  },
+});
+
+Font.register({
+  family: 'Rubik',
+  fonts: [{ src: RubikFont, fontWeight: 400 }],
+});
+Font.register({
+  family: 'Roboto',
+  fonts: [{ src: RobotoFont, fontWeight: 400 }],
+});
+
+const MyDoc = () => {
+  const longNumberExample = "012'345'678'901";
+  const commonLigaturesExample = 'A firefighter from Sheffield';
+  return (
+    <Page style={styles.body}>
+      <Text style={styles.headline}>Rubik</Text>
+      <Text style={styles.rubik}>{longNumberExample} – Default features</Text>
+      <Text style={[styles.rubik, styles.tabular]}>
+        {longNumberExample} – Tabular numbers
+      </Text>
+      <Text style={styles.headline}>Roboto</Text>
+      <Text style={styles.roboto}>
+        {commonLigaturesExample} – Default features
+      </Text>
+      <Text style={[styles.roboto, styles.disableCommonLigatures]}>
+        {commonLigaturesExample} – Common ligatures off
+      </Text>
+      <Text style={[styles.roboto, styles.smallCapitals]}>
+        {commonLigaturesExample} – Small capitals
+      </Text>
+    </Page>
+  );
+};
+
+const App = () => {
+  return (
+    <Document>
+      <MyDoc />
+    </Document>
+  );
+};
+
+export default App;
diff --git a/packages/layout/src/steps/resolveInheritance.js b/packages/layout/src/steps/resolveInheritance.js
@@ -7,6 +7,7 @@ const BASE_INHERITABLE_PROPERTIES = [
   'fontSize',
   'fontStyle',
   'fontWeight',
+  'fontFeatureSettings',
   'letterSpacing',
   'opacity',
   'textDecoration',

diff --git a/packages/layout/src/svg/inheritProps.js b/packages/layout/src/svg/inheritProps.js
@@ -21,6 +21,7 @@ const SVG_INHERITED_PROPS = [
   'fontSize',
   'fontStyle',
   'fontWeight',
+  'fontFeatureSettings',
   'letterSpacing',
   'opacity',
   'textDecoration',

diff --git a/packages/layout/src/text/getAttributedString.js b/packages/layout/src/text/getAttributedString.js
@@ -32,6 +32,7 @@ const getFragments = (fontStore, instance, parentLink, level = 0) => {
     fontWeight,
     fontStyle,
     fontSize = 18,
+    fontFeatureSettings,
     textAlign,
     lineHeight,
     textDecoration,
@@ -83,6 +84,7 @@ const getFragments = (fontStore, instance, parentLink, level = 0) => {
     link: parentLink || instance.props?.src || instance.props?.href,
     lineHeight: lineHeight ? lineHeight * fontSize : null,
     align: textAlign || (direction === 'rtl' ? 'right' : 'left'),
+    features: fontFeatureSettings,
   };
 
   for (let i = 0; i < instance.children.length; i += 1) {

diff --git a/packages/layout/tests/steps/resolveInhritance.test.js b/packages/layout/tests/steps/resolveInhritance.test.js
@@ -152,4 +152,8 @@ describe('layout resolveInheritance', () => {
   test('Should inherit textAlign value', shouldInherit('textAlign'));
   test('Should inherit visibility value', shouldInherit('visibility'));
   test('Should inherit wordSpacing value', shouldInherit('wordSpacing'));
+  test(
+    'Should inherit fontFeatureSettings value',
+    shouldInherit('fontFeatureSettings'),
+  );
 });
diff --git a/packages/textkit/src/layout/generateGlyphs.js b/packages/textkit/src/layout/generateGlyphs.js
@@ -51,7 +51,7 @@ const layoutRun = (string) => {
    */
   return (run) => {
     const { start, end, attributes = {} } = run;
-    const { font } = attributes;
+    const { font, features } = attributes;
 
     if (!font) return { ...run, glyphs: [], glyphIndices: [], positions: [] };
 
@@ -60,7 +60,7 @@ const layoutRun = (string) => {
     // passing LTR To force fontkit to not reverse the string
     const glyphRun = font.layout(
       runString,
-      undefined,
+      features,
       undefined,
       undefined,
       'ltr',

diff --git a/packages/types/style.d.ts b/packages/types/style.d.ts
@@ -82,6 +82,7 @@ export interface Style {
     | 'extrabold'
     | 'heavy'
     | 'black';
+  fontFeatureSettings?: string[] | Record<string, boolean>;
   letterSpacing?: number | string;
   lineHeight?: number | string;
   maxLines?: number; // ?