Change diacritics color with javascript in html/PHP

Question

I am using the following script to remove the diacritics from text, and I was wondering if there is a way to color the diacritics in html or PHP instead of removing them (the example is in Arabic, but the same applies to Hebrew, French, even English.. etc.).

Javascript code:

$(document).ready(function(){

    var bodyText = $('#page_content').html();
    
    function replaceChars()
    {
        newBodyText = bodyText.replace(/َ/gi,'');
        newBodytext = newBodyText.replace(/ً/gi,'');
        newBodyText = newBodyText.replace(/ُ/gi,'');
        newBodyText = newBodyText.replace(/ٌ/gi,'');
        newBodyText = newBodyText.replace(/`/gi,'');
        newBodyText = newBodyText.replace(/ِ/gi,'');
        newBodyText = newBodyText.replace(/ٍ/gi,'');
        newBodyText = newBodyText.replace(/،/gi,'');
        newBodyText = newBodyText.replace(/ْ/gi,'');
        newBodyText = newBodyText.replace(/ّ/gi,'');
    }
    
    
    $('.testMe').toggle(function() {
                     
    replaceChars();
    
    $('#page_content').html(newBodyText);
    $('#actionDiacritics').html('Show');
    }, function() {
    $('#page_content').html(bodyText);
    $('#actionDiacritics').html('Hide');
    });

});
    

Running demo: http://jsfiddle.net/8jAL8/29/

Input: لاَ تَتَعَجَّبُواٌ مِنْ هذَا:

Example of the needed output:

There is an option to do that in Microsoft Word, or LibreOffice, and also I found something here but the first answer needs a fixed text to work, and the second answer just colorizes the whole upper part of the text.

Answer 1

My answer is very crude, and it might not meet your requirements if when you say that you don't want to use "fixed text" you mean text with an absolute position (I assumed you meant "fixed text" in the sense that you cannot dynamically input some text).

All that being said, one thing you can do is have the same text positioned behind (using z-index) in red. When you want to see the red diacritics, you can remove the diacritics of the front text in a way similar to what you are doing now.

HTML

<a class="testMe" id="actionDiacritics" style="cursor: pointer;">Highlight</a>

<br /><br />

<span style="font-size: 30pt">
<div id="page_content">
<span id="highlighted_diacritics">
لاَ تَتَعَجَّبُوا مِنْ هذَا
</span>
<span id="unhighlighted_diacritics">
لاَ تَتَعَجَّبُوا مِنْ هذَا
</span>
</div></span>

CSS

#highlighted_diacritics {
    position: absolute;
    z-index:-1;
    color: red;
}

JS

    $(document).ready(function(){

        var bodyText = $('#unhighlighted_diacritics').html();

        function replaceChars()
        {
            newBodyText = bodyText.replace(/َ/gi,'');
            newBodytext = newBodyText.replace(/ً/gi,'');
            newBodyText = newBodyText.replace(/ُ/gi,'');
            newBodyText = newBodyText.replace(/ٌ/gi,'');
            newBodyText = newBodyText.replace(/`/gi,'');
            newBodyText = newBodyText.replace(/ِ/gi,'');
            newBodyText = newBodyText.replace(/ٍ/gi,'');
            newBodyText = newBodyText.replace(/،/gi,'');
            newBodyText = newBodyText.replace(/ْ/gi,'');
            newBodyText = newBodyText.replace(/ّ/gi,'');
        }


        $('.testMe').toggle(function() {

        replaceChars();

        $('#unhighlighted_diacritics').html(newBodyText);
        $('#actionDiacritics').html('Un-highlight');
        }, function() {
        $('#unhighlighted_diacritics').html(bodyText);
        $('#actionDiacritics').html('Highlight');
        });

    });

Here's an early fiddle: https://jsfiddle.net/8mfgmovj/

You might notice that the red text creates a line around the black text and that the red text might end up in the wrong position after resizing the window, unfortunately.

Answer 2

First, to remove the 8 Arabic tashkeel from an Arabic text, you can do that with the following short line:

const removeTashkel = s => s.replace(/[\u064B-\u0652]/gm,'');

you can then use the function like this:

console.log(removeTashkel("بِسْمِ اللهِ الرَّحْمنِ الرَّحِيْمِ"));

For the 2nd part of your questions, here is a short function to colourize the Arabic diacritics (tashkeel symbols "harakat").

There are eight (8) basic Arabic tashkeel symbols, namely:

U+064B  ً Tanwīn Fatiḥ تنوين بالفتح
U+064C  ٌ Tanwīn Ḍamm تنوين بالضم
U+064D  ٍ Tanwīn Kasr تنوين بالكسر
U+064E  َ Fatḥah الفتحة
U+064F  ُ Ḍammah الضمة
U+0650  ِ Kasrah الكسرة
U+0651  ّ Shaddah الشدة
U+0652  ْ Sukūn السكون

To have each tashkeel symbol (diacritic) has its own colour, call the function with your Arabic text as follows:

let my colouredText = colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا");

// then insert it in your html <div> with:

document.getElementById("your_Div_id").innerHTML = colouredText ;

If you want all tashkeel symbols (diacritics) to have the same colour, then pass the html colour name as the second parameter to the function as follows:

let my colouredText = colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا", "red");

// then insert it in your html <div> with:

document.getElementById("your_Div_id").innerHTML = colouredText ;

Here is the function with working examples.

You can change the eight (8) colour names used for the 8 diacritics symbols on the 2nd line of the function.

In the three (3) examples below; the first one is with different colours, the 2nd is with blue colour, and the 3rd with red colour.

// example

let myText = colorizeTashkeel("بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ")       +'<br><br>'+
         colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا","blue")   +'<br><br>'+
         colorizeTashkeel("ثَلَاثُمِائَةٍ وَأرْبَعَةٌ وَثَلَاثُونَ","red");

document.getElementById("myText").innerHTML = myText;

//=========================================================
function colorizeTashkeel(string, oneColor="") {
let result="",colorTable = ['red','blue','green','DarkOrange','aqua','magenta','BlueViolet','Brown']; // 8 colors for 8 tashkeel vowels
[...string].forEach(char => result += (/[\u064B-\u0652]/.test(char)) ? '<span style="color:' + (oneColor ? oneColor : colorTable[char.charCodeAt() - 1611]) + '">&#8203' + char + '</span>' : char);
return result;
};
//=========================================================

<div id="myText" style="font-size: 40px; font-weight: bold;">

Answer 3

If you include the diacritics in a <span> element with the style set to the color you want, and put a zero-width-space character right before the diacritic (unicode &#8203), it should work. It seems that span element can't change the color of just a diacritic, but if there is some other character there first, it will.

For example:

<div>
     א<span id = "colored1" style="color:red">&#8203ָ</span>
</div>

This worked for me in Chrome, Opera, and Edge. In Firefox, the zero-width-space moved the diacritic over (so much for zero width) but if you remove it entirely, it works correctly.