diff --git a/components/link/bem.scss b/components/link/bem.scss
index 3afb68bfb6..7fb8548535 100644
--- 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
index cc943879a7..ff21d06e2c 100644
--- 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.
+
+
diff --git a/components/link/block.tokens.json b/components/link/block.tokens.json
index 07076e25ae..da12cd8437 100644
--- 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": "",
+ "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
index 106538ca28..8a95dcaaa4 100644
--- 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" }
}
}
}