About Section with both RTL and LTR script

I have an app with the main language being RTL script so the top part of the About section is RTL. However, I’ve put the English translation in the bottom of the About section. I am using the

around the RTL portions and
around the LTR portions.

However, the end of paragraph/line break punctuation markings (periods, colons, etc.) in the English LTR section are appearing as though they are for the RTL section. Anyone know how I can fix this issue?

The code you put in isn’t showing up in the box - would you copy and paste your whole About section into the box here? If it doesn’t show up with the codes showing maybe send me the code in a text file, I’ll msg you my email.

Corey - thanks for your response. I’ll email you my my about html as i don’t want it posted in this forum.

Hi @Corey_Garrett and @lasnider just wondering if you were able to figure out this issue? I have the same issue in a RTL app with English and Arabic in the about section.

I didn’t understand “around the RTL portions and, around the LTR portions”. Is this a CSS setting?

Hi Neil, we worked this out on email but failed to post the result here - let’s remedy that!

Put your text into separate divs like this:

<div dir="rtl" align="default">مي رتل تࣹخت</div>
<div dir="ltr" align="default">My LTR text</div>

In my note I see this, I’ll just paste in:

Once it seemed like when I did that most of the punctuation worked but a couple didn’t – I went in as an Arabic keyboard, deleted the punctuation and retyped it, and it worked. So if most work try that.

Let me know if that does it or you run into trouble.

Normally a <div> should be able to cover multiple lines, but in my testing, you have to put this <div> ... </div> surrounding each line that you want to be LTR. Is that what you have seen as well? That’s seems like a bug to me.

This was a @lasnider project, and I am not sure where this ended up. Luke, did you find that you have to put a div per paragraph?

Awesome, thanks so much! That worked :slight_smile:

Looking back at the project, it seems that I had to use it after each hard return. I couldn’t just use one

tag for the whole RTL portion of the About page.

In relation to another question. I found that the a <body dir="rll"> was not effective in setting the direction for the whole document however instead using <body style="direction:rtl;"> did set the direction for the document.

Why the CSS version is effective when the the HTML attribute 'dir` is not, I don’t have an explanation. I suspect that CSS support is being expanded all the time, while support for HTML attributes is not seen as important since it is handled in CSS.

1 Like