Search code examples
htmlcssunicodearabic

How to color Arabic letter in HTML page?

I have a single arabic character with some vowel over it such as تُ. I want to color basic character (Taa) with one color, two dots on top of it with separate color and the symbol on top of two dots with another color in HTML page. Is it possible? If possible, How can I do it? Example is appreciated.

Solution

  • It's not possible without any workarounds but you can separate the different parts of the character with the help of some unicode character maps and make them as like modules of the main character and assemble them with the help of pseudo selectors. then you're gonna be able to color them individually.

    h1 {
  color:red;
  position: relative;
}

h1::before {
  content: "ܸ";
  color:green;
  position: absolute;
  left: 0.45ch;
  bottom: 1ch;
}

h1::after {
  content: "ُ";
  color:blue;
  position: absolute;
  left:0.1ch;
  bottom: -0.2ch;
}
    <h1>ٮ</h1>