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.
2026-05-12 09:47:05 +00:00
parent 9a3e3f19b7
commit f84523902b
1 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;
+}
+
+