How to automate rendering of LTR words in a RTL table?

General Web Dev
1

I have an HTML table written right to left (RTL) with Aramaic but including words written left to right (LTR) with English.

Aramaic English
ܐ a'

My problem is that the single quote mark in a' is rendered as 'a.

I can fix that with:

<td style="direction: ltr; text-align: right;">CONTENT</td>

But, starting to add the above inline CSS to each <td> manually isn’t ideal so I need to automate rendering the LTR words correctly.

In your opinion, what would be the best way to do that?

2

And what designates text that should be ltr instead of rtl?

If youre going to automate something, you will need a trigger.

Is it everything in column 1? td:nth-child(1) { direction:ltr; ) as a CSS definition.

1 Like
3

And what designates text that should be ltr instead of rtl?

The very fact that it is in English; any <td> that starts with an English letter.

Is it everything in column 1?

All rows of column 1 (as opposed to all rows of column 0) should be in English, yes.

4

CSS does not have a definition for “English”. I have a word that starts with a “T”. Is it English? Estonian? French?

So you should be able to look at

Which puts the direction on the first column…

And you should be able to adjust it to fit your table, no?

1 Like
5

Thank a bunch.

Is there no regex or similar tool to strictly match English letters only (excluding French, Estonian etc.)?

6

Anyway, if I work with a more complex table in which only particular cells (in whatever column) will include LTR words that need to be rendered as a' instead of 'a then must I still use CSS or is there some JavaScript technique to render them that way?
If needed, I’d bet there isn’t but still asking…

7

CSS doesnt do regex. It also doesn’t match on text content, it’s selecting the element based on the attributes of the node.

There’s not such thing as “strictly match English letters”. There’s not a thing such as “English letters”.
A “T” is not an english letter - it is a letter used by many languages.
English includes (though admittedly its rarely used) uses of diaeresis that are entirely of the english language’s design: ex: naïve
English also loanwords words with diacritical markings.
So… your “english” word selector would have to account for loanwords and diaeresis. And when you include those you… end up back where you started for the most part. Everything that uses a descendant of the Latin alphabet.

shrug

Javascript could use a RegEx to apply a style to a table cell. You’d have to determine what qualifies for the regex though. (What if the first character’s a number?)
I stuck with CSS because you posted in the HTML & CSS forum.

2 Likes
8

I will try to ask a moderator to change the tag to general dev.

9

Moved to General Dev.

10

With a lot of help from AI I ended up with the following code which works in this limited scenario,

The problem with this is that I don’t know enough to know if this is right or wrong or will fall on the first hurdle :slight_smile:

It may help as a starting point for someone more advanced than me to work with cough: (@m_hutley ) :slight_smile:

1 Like
11

Paul’s code is… functionally good… as long as you dont end up using a multiple letter combination of a-zA-Z in the middle of a non-LTR word or phrase… I dont know what OP’s requirements are specifically, so…

3 Likes
12

My requirement here is to loop through an entire table that contains cells with phrases in various languages and to set an attribute to each cell that contains a phrase starting with a letter of the English alphabet.

This code:

const englishTerm = /^[a-zA-Z]/;
document.querySelectorAll('td').forEach( (element)=>{
    if ( element.textContent.includes(englishTerm) ) {
        element.setAttribute('style', 'direction: ltr; text-align: right;')
    }
});

Fails with this error:

Uncaught TypeError: First argument to String.prototype.includes must not be a regular expression

13

Given regex is utilized, I had to use matched() instead of includes().