Arabic: glyph spacing issue in PDFs
Closed this issue ยท 9 comments
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
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:
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 />);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.
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.
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:
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
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.
Let's keep the issue open until the missing kerning pair has been added.