Outline effect to text in Arabic using CSS

问题

I want to add an outline to text that works well in Arabic. One possible solution is to use 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>

This is how it renders for me:

As you can see, this works well in English, but not in Arabic. In Arabic, letters are often connected to each other, and the outline should not appear between connected letters. To quote W3:

When adding text border, simply adding a border to each letter shape fails to produce the proper result for the Arabic script. A joined letter should not be separated from its joined neighbors by adding border. Like transparency, a way to avoid this is to unify glyph paths into a single big path for all the letters that are joined and add border around that path.

How can I achieve this correct text border in CSS?

回答1:

Stack many text-shadow having 1px of blur to simulate a solid stroke. The more shadow you add the more you get close to a solid visual

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>

It works also with any value of blur:

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>

来源：https://stackoverflow.com/questions/64609677/outline-effect-to-text-in-arabic-using-css

标签

css

arabic

text-stroke