Arabic render incorrectly in CSS

Question

I have the following HTML & CSS code as follow

<span class="outer">
  <span class="inner">ب</span>َ
</span>

.inner {
  color: rgb(0, 152, 188);
}

The inner layer should be colored, while the outer layer should not be colored.

But since the inner contain ب and outer contain َ

And that 2 character in arabic is merge to form a single letters, the outer also get colored. How can I avoid this? And only get the ب colored and let َ without colored.

I expected the result to be like this . But getting this instead

Answer 1

In terms of pure css you may separate those 2 symbols (held in the content css property so to make it more friendly relative to the html) and use pseudo elements that will be absolute positioned relative to the .arabic container.

For completeness I might say that the vowel mark doesn't fit perfectly the size of the underlying letter... a solution could be changing the font-size of it independently but result may vary.

.arabic{
  position: relative;
  font-weight: 600;
  font-size: 2rem;  
}

.arabic::before {
  position: absolute;
  content: 'ب'; /* arabic letter */
  color: rgb(0, 152, 188); 
}

.arabic::after {
  position: absolute;
  content: 'َ'; /* vowel mark */
}

<span class="arabic"></span>

While if you wanted to keep your html unchanged like what you showed in your question, the key for the .inner style to work correctly was adding position: absolute;.

I think the reason why it didn't work otherwise, it's because internally the phrasal content gets merged in one single inline (block) earning the .inner style as a whole. While if you define the position differently, it forces the inner content as not being inline keeping them divided.

But I'm not sure about that.

(I'm vaguely referring to ligatures) but I'm going far beyond the scope of my knowledge here.

.inner {
  position: absolute;
  color: rgb(0, 152, 188);
}

<span class="outer">
  <span class="inner">ب</span>َ
</span>