Arabic: glyph spacing issue in PDFs

[TheMikeyRoss]

Hi 👋

I'm using IBM Plex Sans Arabic in @react-pdf/renderer and I noticed a spacing issue in the Arabic font, specifically in two glyphs:

• U+feae (Arabic Letter Reh Final Form) - File
• U+feb0 (Arabic Letter Zain Final Form) - File

He's a link to a reproduction of the issue

[BoldMonday]

You expect me to click on a link that looks like this? No thank you.

https://react-pdf-repl.vercel.app/?gz_code=eJzFk8Fu2kAQhu88xci9EMllE1BpoYCapo1Co6ZOoET0Ui1mbFa1vdbuUEMRh-bILY9SngbyNB0HEdILPaX1yf69_8w3vz0qTrUhmEEXJ-SCJ0N0oacwc-Gd9scxJqye6oRgDoHRMThvDEqfnqfDQBhMhmjQOK8LhfxMyWCoLKEpzgoAgYxVNK2D0377EbwIJ9CRiYVjIwfKd1w-YY3Pr0dEqa0LEXAFWwotSVJ-ydexsEIN4pSdlo3y3ie-H5XFZVa5-HJF197lyfgsxupLet__3J5UzkeH3tlV7aLa9z59rZ10e7b34XzStSWigBvOD5gTJ_cDDzGQ44igeADNFhQZprGdFyxNI2zOZpATne6dAubzFnvZnScHVv3ApnNcdTYiy3mU24eNkgf9Z4sOu-pQfuVCLE2okq5O6_DCBV9H2nDnZ0dBeVCpOS5ESJxuJ5W-SsI6HD6031zrm9VyvVgtH0s_V7_Wi_XNg9QQOcDOJQR0R8gcUaQzrgqZNt8sBCrBnecpmRlwH1xfj8GXCVhEkEAqmYLlWggDpAwx4QIgkyE8rvLEuOvF39LcEIZIFgYqDNH8V9r9X_96xFhtMJhGOTQx_moJ2jAjZIpGnPrdLSj61z8Gw9_d7oFviN1uNUS-fvl9Q2zXuFXgdf8Nzdl_dg&modules=true

[TheMikeyRoss]

That link is generated from this tool Which is based on this but with extra debugging tools.

You can see how the links are generated since the code is opensource for both tools.
react-pdf.org/repl = https://github.com/diegomura/react-pdf-site/blob/master/pages/repl.js
react-pdf-repl = https://github.com/jeetiss/react-pdf-repl

If you don't trust react-pdf-repl.vercel.app and you want a reproducable code using the repl tool of react-pdf.org then here you go here (it also generates a long hash)

If you're still scared of the link here's a screenshot:

If you don't care about the code here's an annotated screenshot of the glyph issue visualized:

[TheMikeyRoss]

If you want to reproduce the issue live

Option 1

go to https://react-pdf-repl.vercel.app/ and replace the default code with the one below

import { Text, Page, View, Document, Font } from "@react-pdf/renderer";

Font.register({
  family: "IBM Plex Sans Arabic",
  src: "https://fonts.gstatic.com/s/ibmplexsansarabic/v12/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_9CTVsVJKxTs.ttf",
});

export default () => (
  <Document style={{ fontFamily: "IBM Plex Sans Arabic" }}>
    <Page size="A6">
      <View>
           <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          قزيز
          فريق
        </Text>
        // The following works fine
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          فر
        </Text>
        // You can see a tiny space between ف and ر
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          فري
        </Text>
        // The space gets bigger between ف and ر
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          فريق
        </Text>
        // When I replace the ز or ر with a ڑ it works fine
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
           فڑيق
        </Text>
      </View>
    </Page>
  </Document>
);

Option 2

go to https://react-pdf.org/repl and replace the default code with the following:

Font.register({
  family: "IBM Plex Sans Arabic",
  src: "https://fonts.gstatic.com/s/ibmplexsansarabic/v12/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_9CTVsVJKxTs.ttf",
});


const TestComponent = () => (
   <Document style={{ fontFamily: "IBM Plex Sans Arabic" }}>
    <Page size="A6">
      <View>
           <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          قزيز
          فريق
        </Text>
        // The following works fine
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          فر
        </Text>
        // You can see a tiny space between ف and ر
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          فري
        </Text>
        // The space gets bigger between ف and ر
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
          فريق
        </Text>
        // When I replace the ز or ر with a ڑ it works fine
        <Text style={{ fontSize: 28, marginTop: 5, color: "#1f2b39", letterSpacing: 0 }}>
           فڑيق
        </Text>
      </View>
    </Page>
  </Document>
);

ReactPDF.render(<TestComponent />);

[BoldMonday]

Thank you for the additional examples and links!

I'm unable to replicate the issue, and I suspect the issue is caused by the text shaping and/or layout engine in your environment.

I see strange things happening with the placement of marks in the examples above, for example.
Are you sure that all the OpenType features are applied correctly in this environment?

When testing the same text in an environment that is guaranteed to use correct text shaping (Harfbuzz) and application of OpenType features I get the following (correct) results:

Please note that you are using an older version (v1.2) of Plex Sans Arabic from Google fonts.
I advise to use the latest version from this repository and test again. If the problem persists I recommend to file an issue with the developer of react-pdf.

[BoldMonday]

Looking further into this I can confirm there is one missing kerning pair at the red marked glyph.
I will make a note about it for the next update.

[TheMikeyRoss]

I advise to use the latest version from this repository and test again. If the problem persists I recommend to file an issue with the developer of react-pdf.

Oh ok , If I may ask how were you able to check the version of the font?

I ran the following command to get the ttf:

curl "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic&family=Readex+Pro&display=swap"

and I got the following response:

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsansarabic/v12/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6bs6.ttf) format('truetype');
}

And when I use that ttf link to download the file and check the details of the file I see the following:

[TheMikeyRoss]

Finally I just verified that the issue is in fact not with IBM Plex Sans Arabic but actually in @react-pdf/renderer

I used a different font "cairo" and the same spacing-between-glyphs issue happens

I'm not sure if I should close this issue or if you want to keep it open for your comment here

Thank you @BoldMonday

[BoldMonday]

File info is the correct way to check version number, and indeed these are v1.1 fonts.
I was looking at the Google fonts url and noticed a /v12/ part which I wrongfully assumed was related to the version number.

[BoldMonday]

Let's keep the issue open until the missing kerning pair has been added.