Эффект выделения текста на арабском языке с помощью CSS

#css #arabic

#css #Арабский

Вопрос:

Я хочу добавить контур к тексту, который хорошо работает на арабском языке. Одним из возможных решений является использование text-stroke :

 body {
  background-color: pink;
  }
h1 {
  color: white;
  text-align: center;
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}

 <h1>Experiment</h1>
<h1>تجربة</h1>

Вот как он отображается для меня:

Как вы можете видеть, это хорошо работает на английском, но не на арабском. В арабском языке буквы часто соединены друг с другом, и контур не должен появляться между соединенными буквами. Для цитирования W3:

При добавлении границы текста простое добавление границы к каждой форме буквы не дает надлежащего результата для арабского шрифта. Соединенная буква не должна быть отделена от соседних соединенных букв добавлением границы. Как и прозрачность, способ избежать этого — объединить пути глифов в один большой путь для всех соединенных букв и добавить границу вокруг этого пути.

Как я могу добиться этой правильной границы текста в CSS?

1.jsfiddle.net/xmarLb6h ?

2. @TemaniAfif Если выглядит хорошо, опубликуйте ответ! По какой-то причине, когда я попытался text-shadow , я получил неправильную границу текста. Было бы хорошо, если бы вы объяснили в своем ответе, как вы убедились text-shadow , что это не вызвало этой проблемы.

Ответ №1:

Стек много text-shadow 1px размытия для имитации сплошного штриха. Чем больше теней вы добавляете, тем больше приближаетесь к сплошному визуальному

 body {
  background-color: pink;
}

h1 {
  color: white;
  text-align: center;
  text-shadow: 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000, 
   0 0 1px #000;
}

 <h1>Experiment</h1>
<h1>تجربة</h1>

Это работает также с любым значением размытия:

 body {
  background-color: pink;
}

h1 {
  --s:2px;
  color: white;
  text-align: center;
  text-shadow: 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000, 
   0 0 var(--s) #000;
}

 <h1>Experiment</h1>
<h1>تجربة</h1>