Merge pull request #2 from MendyLanda/font-feature-settings

Author: MendyLanda

.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 customize ligatures, tabular number display, and other font features

packages/examples/vite/src/examples/font-feature-settings/index.jsx

@@ -0,0 +1,86 @@
+/* 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 FontFeatureSettings = () => {
+  return (
+    <Document>
+      <MyDoc />
+    </Document>
+  );
+};
+
+export default {
+  id: 'font-feature-settings',
+  name: 'Font Feature Settings',
+  description: '',
+  Document: FontFeatureSettings,
+};

packages/examples/vite/src/examples/index.ts

@@ -2,7 +2,9 @@ import duplicatedImages from './duplicated-images';
 import ellipsis from './ellipsis';
 import emoji from './emoji';
 import fontFamilyFallback from './font-family-fallback';
+import fontFeatureSettings from './font-feature-settings';
 import fontWeight from './font-weight';
+import forms from './forms';
 import fractals from './fractals';
 import goTo from './go-to';
 import imageStressTest from './image-stress-test';
@@ -18,14 +20,14 @@ import resume from './resume';
 import svg from './svg';
 import svgTransform from './svg-transform';
 import transformOrigin from './transform-origin';
-import forms from './forms';
 
 const EXAMPLES = [
   duplicatedImages,
   ellipsis,
   emoji,
   fontFamilyFallback,
   fontWeight,
+  fontFeatureSettings,
   fractals,
   goTo,
   JpgOrientation,

packages/examples/vite/src/index.tsx

@@ -1,8 +1,8 @@
 import './index.css';
 
+import { PDFViewer } from '@rpdf/renderer';
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { PDFViewer } from '@rpdf/renderer';
 
 import EXAMPLES from './examples';
 
@@ -25,13 +25,13 @@ const ExamplesPage = () => {
   const { Document } = EXAMPLES[index];
 
   return (
-    <main className="w-screen h-screen flex">
+    <main className="flex w-screen h-screen">
       <nav className="bg-slate-100 w-60">
         <ul>
           {EXAMPLES.map((example) => (
             <li
               key={example.id}
-              className="hover:bg-slate-200 w-full px-4 py-1 cursor-pointer transition-all border-b border-slate-300 flex"
+              className="flex w-full px-4 py-1 transition-all border-b cursor-pointer hover:bg-slate-200 border-slate-300"
             >
               <a href={`#${example.id}`} className="flex-1">
                 {example.name}
@@ -41,7 +41,7 @@ const ExamplesPage = () => {
         </ul>
       </nav>
 
-      <div key={hash} className="h-full flex-1">
+      <div key={hash} className="flex-1 h-full">
         <PDFViewer showToolbar={false} className="size-full">
           <Document />
         </PDFViewer>

packages/layout/src/steps/resolveInheritance.ts

@@ -12,6 +12,7 @@ const BASE_INHERITABLE_PROPERTIES = [
   'fontSize',
   'fontStyle',
   'fontWeight',
+  'fontFeatureSettings',
   'letterSpacing',
   'opacity',
   'textDecoration',

packages/layout/src/svg/inheritProps.ts

@@ -23,6 +23,7 @@ const BASE_SVG_INHERITED_PROPS = [
   'fontSize',
   'fontStyle',
   'fontWeight',
+  'fontFeatureSettings',
   'letterSpacing',
   'opacity',
   'textDecoration',

packages/layout/src/text/getAttributedString.ts

@@ -47,6 +47,7 @@ const getFragments = (
     fontWeight,
     fontStyle,
     fontSize = 18,
+    fontFeatureSettings,
     textAlign,
     lineHeight,
     textDecoration,
@@ -100,6 +101,7 @@ const getFragments = (
     // @ts-expect-error allow this props access
     link: parentLink || instance.props?.src || instance.props?.href,
     align: textAlign || (direction === 'rtl' ? 'right' : 'left'),
+    features: fontFeatureSettings,
   };
 
   for (let i = 0; i < instance.children.length; i += 1) {

packages/layout/tests/steps/resolveInhritance.test.ts

@@ -175,4 +175,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'),
+  );
 });

packages/stylesheet/src/types.ts

@@ -321,12 +321,44 @@ export type TextTransform =
 
 export type VerticalAlign = 'sub' | 'super';
 
+export type FontFeatureSetting =
+  | 'liga'
+  | 'dlig'
+  | 'onum'
+  | 'lnum'
+  | 'tnum'
+  | 'zero'
+  | 'frac'
+  | 'sups'
+  | 'subs'
+  | 'smcp'
+  | 'c2sc'
+  | 'case'
+  | 'hlig'
+  | 'calt'
+  | 'swsh'
+  | 'hist'
+  | 'ss**'
+  | 'kern'
+  | 'locl'
+  | 'rlig'
+  | 'medi'
+  | 'init'
+  | 'isol'
+  | 'fina'
+  | 'mark'
+  | 'mkmk';
+export type FontFeatureSettings =
+  | FontFeatureSetting[]
+  | Record<FontFeatureSetting, number>;
+
 export type TextStyle = {
   direction?: 'ltr' | 'rtl';
   fontSize?: number | string;
   fontFamily?: string | string[];
   fontStyle?: FontStyle;
   fontWeight?: FontWeight;
+  fontFeatureSettings?: FontFeatureSettings;
   letterSpacing?: number | string;
   lineHeight?: number | string;
   maxLines?: number;
@@ -347,6 +379,7 @@ export type TextSafeStyle = TextExpandedStyle & {
   fontWeight?: number;
   letterSpacing?: number;
   lineHeight?: number;
+  fontFeatureSettings?: FontFeatureSettings;
 };
 
 // Margins

packages/textkit/src/layout/generateGlyphs.ts

@@ -42,7 +42,7 @@ const layoutRun = (string: string) => {
    */
   return (run: Run) => {
     const { start, end, attributes = {} } = run;
-    const { font } = attributes;
+    const { font, features } = attributes;
 
     if (!font) return { ...run, glyphs: [], glyphIndices: [], positions: [] };
 
@@ -53,7 +53,7 @@ const layoutRun = (string: string) => {
     // passing LTR To force fontkit to not reverse the string
     const glyphRun = font[0].layout(
       runString,
-      undefined,
+      features,
       undefined,
       undefined,
       'ltr',