Comments (9)
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.
Related Issues (20)
- ISSUES WITH ARABIC FONT - 1 LETTER HOT 5
- Strange placement of the "tonos" above lowercase Greek eta in the Serif variant HOT 2
- Missing precomposed characters for Cyrillic Schwa/Barred-O/E with diaeresis above (`U+04DA`..`U+04DB`, `U+04EA`..`U+04ED`). HOT 1
- Source files too large to upload to github HOT 13
- Issues and Suggestions for Sans TC HOT 23
- Put latest version of Plex Sans Condensed (v1.4) in repo HOT 2
- Issues for Sans TC๏ผโผก(kangxi radical go)& โผข(kangxi radโฆgo slowly) should look differently๏ผandโฆ
- Assets are too large to publish to npm
- IBM Plex Sans TC doesn't show all the glyphs in Windows Character Map (v6.4.0) HOT 2
- v6.4.0 tag doesn't belong to any branch on this repository
- IBM Plex Sans Hebrew - no support for U+FB1E (Hebrew Point Judeo-Spanish Varika) HOT 2
- ## [IBM PLEX MONO V2.4] - 2023-12-21
- Reversed question mark
- Problem with Sans JP: ้ U+964B is incorrect HOT 2
- The character โโณโ (U+21B3) is not present in Google Fonts' IBM Plex Mono Regular HOT 1
- Modifier letter apostrophe is hard to see HOT 6
- The contour problem of Sans TC: ็ป U+7ECF HOT 2
- Data integration
- Character U+71F9 ็น has shapeshifters HOT 1
- Document changes to what assets are delivered in new npm packages
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plex.