Arabic: glyph spacing issue in PDFs about plex HOT 9 CLOSED

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.

from plex.

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

from plex.

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.

from plex.

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

from plex.

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

from plex.

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:

from plex.

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 />);

from plex.

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.

from plex.

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:

from plex.