Improve Arabic text display by fixing clipped dots on characters

Add a global CSS rule to increase line-height for truncated Arabic text, ensuring diacritics are fully visible. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 8f7b38c9-dbac-45e9-86d9-0cb4f4a5d011 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/O07Jndv Replit-Helium-Checkpoint-Created: true
2026-05-12 09:47:05 +00:00
parent e4b5ece2e4
commit 207d2ad52b
2 changed files with 19 additions and 0 deletions
@@ -420,3 +420,22 @@
  }
 }

+/*
+ * Arabic dot/diacritic clipping fix for truncated text (Task #503 follow-up).
+ *
+ * `.truncate` uses `overflow: hidden` + `white-space: nowrap`. With Tailwind's
+ * default tight line-heights on small text (text-xs / text-sm / text-[11px]),
+ * the line-box is shorter than what Arabic glyphs actually paint — the dots
+ * under ي / ب / ج and over ت / ن get sliced off, especially on iPad/WebKit
+ * which rasterizes these faces a hair taller than desktop.
+ *
+ * Fix: when the document is in RTL, give every truncated element a roomier
+ * line-height so the line-box covers the full glyph extent. 1.6 matches what
+ * we shipped for the launcher tiles in #503 and is safe for single-line
+ * (`white-space: nowrap`) layouts where vertical rhythm doesn't matter.
+ */
+html[dir="rtl"] .truncate {
+  line-height: 1.6;
+}
+
+