feat: configure text-underline offset to improve Arabic links

nl-design-system · Oct 14, 2021 · 6d1c69a · 6d1c69a
1 parent ea8b376
commit 6d1c69a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/components/link/bem.scss b/components/link/bem.scss
@@ -9,6 +9,8 @@
 .utrecht-link {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
+  text-decoration-skip-ink: all;
+  text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
 .utrecht-link:visited,

diff --git a/components/link/bem.stories.mdx b/components/link/bem.stories.mdx
@@ -206,3 +206,21 @@ Styling via the `.utrecht-link--external` class name.
 - `rel="noopener"` helps security: disable JavaScript contact via `window.opener` between the current page and the page you link to.
 - `rel="noreferer"` helps privacy: normal links leak privacy sensitive data. The 3rd-party website you link to will find out what page you were on via the HTTP `Referer` header. Including `noreferer` disables the `Referer` header.
 - Avoid using `target="_blank"` for external just because you don't want the visitor to leave your website, they can decide themselves to open a link in a new tab or window.
+
+## Link in Arabic script
+
+The underline of the link should not negatively impact the readability of the text, by crossing through any [Arabic diacritics](https://en.wikipedia.org/wiki/Arabic_diacritics). Configuring `text-decoration-skip-ink` in CSS can improve the default rendering of the underline by skipping over the diacritics.
+
+<Canvas>
+  <Story
+    name="Arabic link"
+    args={{
+      href: "mailto:info@example.com",
+      textContent: "تواصل معنا من خلال البريد الإلكتروني",
+      mail: true,
+    }}
+    decorators={[(story) => `<div dir="rtl" lang="ar">${story()}</div>`]}
+  >
+    {Link.bind({})}
+  </Story>
+</Canvas>
diff --git a/components/link/block.tokens.json b/components/link/block.tokens.json
@@ -12,6 +12,12 @@
           "syntax": "none | underline",
           "inherits": true
         }
+      },
+      "text-underline-offset": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
       }
     }
   }

diff --git a/proprietary/design-tokens/src/component/utrecht/link/block.tokens.json b/proprietary/design-tokens/src/component/utrecht/link/block.tokens.json
@@ -2,7 +2,8 @@
   "utrecht": {
     "link": {
       "color": { "value": "{utrecht.color.blue.30.value}" },
-      "text-decoration": { "value": "underline" }
+      "text-decoration": { "value": "underline" },
+      "text-underline-offset": { "value": "3px" }
     }
   }
 }