Issue
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
Solution
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>
Answered By - Diego D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.