Tips for Implementing Color-coded Manchu/Mongolian Script on Your Website

My journey began with a seemingly straightforward task. I had a Manchu word written in the traditional script and I wanted to change the color of all the vowels in the word (ignoring ligatures).

<p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p>
<p><span class="red">ᠠ</span>ᠮᠪᡠᠯ<span class="red">ᠠ</span> ᠪᠠᠨ<span class="red">ᡳ</span>ᡥ<span class="red">ᠠ</span></p>

However, this method did not yield the desired result. The cursive nature of the script caused an artificial break within the word when wrapping individual letters in a span element. This led me to question: Arabic is also a cursive script... so I took a random sentence in Arabic.

<p> مرحبًا، كيف يم<span class="red">ن</span>نني مساعدتك؟ </p>

Surprisingly, this approach worked for me.

I then explored alternative solutions, but none proved to be effective without utilizing complex tools such as HarfBuzz or manually implementing glyph substitution, ligation, and kerning rules on HTML canvas. These methods were not ideal for a simple website project of mine, and beyond my current capabilities. Editing font files by linking glyphs to potentially unauthorized unicode codepoints was considered, but would violate online font licenses. Even experimenting with Free variant selectors did not provide a viable solution due to limitations and lack of support in certain fonts.

It's unfortunate that what seemed like a simple task turned into a dead end so quickly, highlighting the challenges faced by minority cursive scripts in the digital realm. Any guidance on this matter would be greatly appreciated!

Answer №1

A. Using SVG: To add color to specific elements within your text, consider converting the text into an SVG image. By creating separate text elements for each character and styling them individually using CSS, you can have more control over manipulating and styling individual characters with SVG. Keep in mind that this method may not be suitable for large amounts of text due to potential performance issues.

B. Experimenting with the :nth-letter selector:

<style>
    .red {
        color: red;
    }

    /* Apply red color to odd letters */
    p:nth-letter(odd) {
        color: red;
    }
    
    /* Apply red color to even letters */
    p:nth-letter(even) {
        color: red;
    }
</style>

<p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p>

Note that browser support for the :nth-letter selector is currently limited, so testing across different browsers is crucial to ensure desired functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating Sleek Rounded Corners with Pure CSS in Older Versions of Internet Explorer (Compatible with jQuery)

Looking for a seamless solution to render rounded corners on browsers that do not support CSS3 without the delay typically seen with JQuery plugins. The use of .htc files with www.css3pie.com seems like the best option so far, but there is still a delay c ...

perform an action in PHP when a button is clicked

I'm currently developing a PHP admin panel that displays a list of users in an HTML table format. Each row in the table includes a button that allows the admin to send a notification to the selected user. Below is the code I used to create and displa ...

Navigating an HTML table with Selenium and Python by scrolling down

I am currently working on a project where I need to automate scrolling down an HTML table until the last row becomes visible. The table initially displays around 20 rows and then loads more as one scrolls down. To achieve this task, I am using Selenium web ...

What is the best way to showcase a variable from a switch statement on my ASP.NET web page?

Looking to format the month from a datetime object as text in this style: 01 Dec 2011 A switch statement was set up to determine the month and assign it to a variable for display on index.aspx. However, the code doesn't seem to be functioning as e ...

Platform designed to simplify integration of high-definition imagery and scalable vector illustrations on websites

In the ever-evolving world of technology, some clients support advanced features like svg while others do not. With the rise of high resolution devices such as iPhone 4+ and iPad 3rd gen., it has become crucial to deliver graphics that can meet these stand ...

How to align a Bootstrap form to the center

Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...

Tips for creating a condensed header

As a newcomer to HTML, I am facing challenges in creating a simple header similar to the one displayed on this website or the example in the image below. Below is the snippet of HTML that I have attempted: <header class="header"> <div ...

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...

WordPress Ignoring PHP Generated Elements When Processing Divs

Whenever I attempt to utilize the get_date function, it seems to disregard all div elements and instead places itself right after the header, at the beginning of the <div class="entry-content">. <div class="entry-content"> May 16, ...

The div is not showing the image as expected

Having some trouble creating a slideshow within my angular application. Struggling to get the images to display in the html code. To tackle this, I decided to create a separate component specifically for the slideshow (carousel.component). In the main app ...

Gradually vanishing words while they glide across the screen

I want to achieve a similar effect seen in the game A Dark Room. The text in the game serves two purposes which I am trying to replicate: The new text is added above the old text instead of below it, pushing the older text down the page as the game progr ...

What is the proper way to utilize xpath for locating an element that has two specific descendants?

I'm faced with a challenge involving an unordered list of dynamically generated list items, each containing labels and values. My goal is to validate that the list includes a specific label with a specific value. I'm grappling with crafting an x ...

What are the tips for aligning this button perfectly on the page, despite being centered in a computer's resolution?

Dealing with Responsive Design Hey there! I'm having an issue with my Bootstrap layout. I managed to center a button, but when I adjust the resolution or make it smaller, the button wraps and shifts to the right. Can anyone help me figure out what we ...

Unable to modify the border radius of the carousel indicators in Bootstrap 5

Currently, I am working with the carousel component in Bootstrap 5.1. I have encountered an issue where I am unable to add border-radius to the carousel indicators, despite trying various methods. Even though the inspector shows that the indicators (HTML ...

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

Is it possible to use JavaScript for detecting third-party videos?

I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...

Can variables be transmitted through Real-Time Communication in JavaScript?

Currently, I am in the process of developing a multiplayer game using three.js. The basic framework is all set up and my next step is to implement the multiplayer aspect. After some research, I came across RTC as a solution that doesn't require comple ...

I'm on the lookout for some fonts that are compatible with GD. Where

Currently, I am using GD to display text with the default font being Courier (or something similar). However, I am looking to switch to a different font and came across the function imageloadfont that requires a .gdf file. After searching on Google for s ...

Unable to retrieve input values from the text fields using JavaScript

In my project, I have created two PHP pages - "doc.php" and "chkval.php". The issue I am facing is that the textfield values are not being captured in the "chkval.php" page using $POST method. An error that I encountered is: Use of undefined constant re ...

The function `jQuery .html('<img>')` is not functional in Firefox and Opera browsers

This particular code snippet jq("#description" + tourId).html('<b>Opis: </b> '+ data); has been tested and functions correctly in Internet Explorer, Firefox, and Opera. However, when it comes to this specific piece of code jq("#i ...