0

I have this problem that there is a border around the text when stacking that same word over itself. you see I'm trying to color diacritical marks in Arabic like "كتب" vs "كُتُب" there is no direct way to do that. so I write the text twice one with the diacritical marks and the other without, then stack them together just like in container1:

body,
* {
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

div {
  position: relative;
  height: 200px
}

div p {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 100px;
  font-weight: 600;
}

.container1 p.colored {
  color: red;
  z-index: 1;
}

.container1 p.base {
  color: #000;
  z-index: 2;
}


/* container2 */

.container2 p.base {
  color: #000;
  z-index: 2;
}


/* container3 */

.container3 p.colored {
  color: blue;
  z-index: 1;
}

.container3 p.base {
  color: #000;
  z-index: 2;
}


/* container4 */

.container4 p.colored {
  color: green;
  z-index: 1;
}

.container4 p.base {
  color: #000;
  z-index: 2;
}
<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>

</head>

<body>

  <div class="container1">
    <p class="colored">
      كُتُب
    </p>
    <p class="base">
      كتب
    </p>
  </div>

  <div class="container2">
    <p class="base">
      كُتُب
    </p>
  </div>

  <div class="container3">
    <p class="colored">
      كُتُب
    </p>
    <p class="base">
      كُتُب
    </p>
  </div>

  <div class="container4">
    <p class="colored">
      كُتُب
    </p>
    <p class="base">
      كُتُب
    </p>
  </div>

</body>

</html>

but if you can see there is a border to the text in container1 with the color red. if you can't see it try changing the color from the devtool with the color Picker. how can I prevent this effect? thanks note that i can't change the font weight of the colored paragraph.

Laaouatni Anas
  • 4,199
  • 2
  • 7
  • 26
abdo sayed
  • 33
  • 7

1 Answers1

0

an alternative way is to use ::before pseudoelement

enter image description here

  1. inside the content: ""

  2. putting the vowels one by one (without their letter)

  3. the vowel need to be in UNICODE

now 100% it will work because there isn't the letter but only the vowel

TLDR, here is the table:

arab name Unicode
َ fatha \064E
ُ damma \064F
ِ kasra \0650
ّ shadda \0651
ْ sukun \0652

code example:

* {
  font-size: 20vmin;
}

.text {
  position: relative;
}

.text::before {
  content: "";
  position: absolute;
  color: red;
  right: 1ch;
}

.fatha::before {
  content: "\064E";
}

.damma::before {
  content: "\064F";
}

.kasra::before {
  content: "\0650";
}

.shadda::before {
  content: "\0651";
}

.sukun::before {
  content: "\0652";
}
<div style="display: flex; justify-content: space-around">
  <p class="text fatha">كَ</p>
  <p class="text damma">كُ</p>
  <p class="text kasra">كِ</p>
  <p class="text shadda">كّ</p>
  <p class="text sukun">كْ</p>
</div>

<div style="display: flex; justify-content: space-around">
  <p class="word"><span class="text fatha">كَ</span>تب</p>
  <p class="word"><span class="text damma">كُ</span>تب</p>
  <p class="word"><span class="text kasra">كِ</span>تب</p>
</div>

<div style="display: flex; justify-content: space-around">
  <p class="word"><span class="text shadda">كّ</span>تب</p>
  <p class="word"><span class="text sukun">كْ</span>تب</p>
</div>

attention: the position isn't precise when compared to real letter with vowels

but if you don't compare to real one, it should work fine. (like the first image on the top)

Laaouatni Anas
  • 4,199
  • 2
  • 7
  • 26
  • Unfortunately, this didn't work for me try playing with the color picker and make the text identical in both in the p and the ::before so that you and focus in the border problem. – abdo sayed Sep 17 '22 at 15:22
  • @abdosayed updated with another solution see now – Laaouatni Anas Sep 17 '22 at 20:22
  • That's a really cool solution but it doesn't work, unfortunately, see I edited your snippet the marks from ::before don't match the real ones added in the text and the problem gets bigger if you use it in a word, not a letter.*I find a solution and it's to use a font design tool. my solution is not CSS based and is a little ugly. in my example the one with two texts one with the marks to color and the other without, I used a new font I created using a font editor for the marks text. the new font is the same as the other font but with the characters colored transparent. – abdo sayed Sep 19 '22 at 08:30
  • note that my solution has many problems, for example, colored characters can't change color or font weight by CSS.(don't know if there is a way to change that) so if you use my solution don't color the marks so that you can do that by CSS. – abdo sayed Sep 19 '22 at 08:58
  • @abdosayed yeah, I know your feeling, is very difficult to do this with HTML, and have many bugs (it works fine in one letter but not more) maybe we can use a script JavaScript that split every letter and for every letter create a div and add the before class correct) and is very hard because I tried for example the "fatha" with N is different position, then the K. and we need to solve it to every letter and is a pain. sorry I tried to do my best (I have english keyboard so I can't type arabic, I copy from internet so it also harder to me to create script that work for every letter) sorry :/ – Laaouatni Anas Sep 19 '22 at 09:19
  • don't worry at all. thanks very much for your help I really appreciate it. – abdo sayed Sep 19 '22 at 13:07