Arabic text-shadow trouble

<html>
  <body style="font-size: 36px; background: #4488ff; color:#fff;">
    <div>
      <span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
    </div>
    <div style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
      <span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
    </div>
  </body>
</html>

I've noticed that spanned Arabic text have gaps (tested on Chrome\FireFox). Well, I need text to be spanned and I don't think that gaps should exist, anyway I could overcome the issue?

Solution

Another option would be to use drop-shadow filter untill text-stroke works :

possible example:

span:nth-child(3) {
  color: gold;
}

body {
  font-size: 80px;
  background: #4488ff;
  color: #fff;
  margin: auto;
}

html {
  display: flex;
  min-height: 100vh
}

<div style="filter:
drop-shadow(1px 1px 0px #000)  
drop-shadow(-1px -1px 0px #000)
drop-shadow(-1px 1px 0px #000)  
drop-shadow(1px -1px 0px #000)
">
  <span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>