rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ensure Arabic text displays correctly when printing documents

Browse Source 
Update font configurations to exclusively use DIN Next LT Arabic, preload necessary font files, and implement eager font loading to prevent display issues during printing.
This commit is contained in:
Riyadh
2026-05-03 18:37:48 +00:00
parent a048fe2816
commit 4215cd25ee
4 changed files with 44 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/index.html
+7 -12
View File
@@ -12,23 +12,18 @@
is needed at page load, which speeds up first paint and removes
the external dependency.
#350 (browser print): preload the Arabic-shaping fonts used by
the print stylesheet (DIN Next LT Arabic — the app's default —
and Tajawal as the secondary). Without this, if the user has
never rendered text in these families on screen (e.g. their
preference is "Helvetica Neue" Latin), the browser would only
start downloading them when the print dialog opens. Print is a
synchronous snapshot and would capture the fallback glyphs —
isolated, unjoined Arabic letters that look reversed.
#350 (browser print): preload DIN Next LT Arabic — the app's
sole Arabic print font — so it's already in the HTTP cache by
the time `@font-face` (declared with `font-display: block` in
custom-fonts.css) wants to fetch it. Without this, Chrome's
print snapshot can be taken before the font is ready and the
output uses a system fallback that lacks Arabic GSUB shaping
(isolated, unjoined letters that look reversed).
-->
<link rel="preload" href="/fonts/DINNextLTArabic-Regular.ttf"
as="font" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" href="/fonts/DINNextLTArabic-Bold.ttf"
as="font" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" href="/fonts/Tajawal-Regular.ttf"
as="font" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" href="/fonts/Tajawal-Bold.ttf"
as="font" type="font/ttf" crossorigin="anonymous" />
</head>
<body>
<div id="root"></div>