Text Alignment Control | Right to Left Alignment

[Alivated]

Not only is the alignment control useful to users by allowing them to align texts in a certain way (left | center | right | justified), but for certain languages that are inscribed from right to left, like Arabic which I am a native of, this is essential to add.

Please take a look at this if it is any help.
https://phpbbstudio.com/kb/bbcodes/text-alignment

[EranBarLev]

ניסיון

It doesn't work BBCode seems to be disabled even though on the right side it says it's ON.

[duome]

let's see if it works...

Ok, I added a custom RTL BBcode which is available while editing the post, but can you please test it on some arabic text? Does it actually work as intended?

[EranBarLev]

شكرا يا دوومي!
תודה רבה דואומי!

This seems to work now!

[Alivated]

I want to report that there is a little inconvenience with the RTL function.
When it comes to normal text, it works perfectly. However, when I try to align listed items from right to left, it doesn't work. It's as if the listing code forces the text to stay left.

Check out this example (the RTL is used on this text but it remains aligned as LTR):

عنوان

• مثال عنصر قائمة 1

• مثال عنصر قائمة 2

• مثال عنصر قائمة 3

---

As you can see, the bold text (not listed) is aligned correctly with no problems but the listed items under it are not. Moreover, the closing tag of the RTL is showing at the bottom for some reason.

[EranBarLev]

As you can see, the bold text (not listed) is aligned correctly with no problems but the listed items under it are not. Moreover, the closing tag of the RTL is showing at the bottom for some reason.

I'm getting the same result with markdown numbered list in Hebrew:

ניסיון

1. אחת
2. שתיים
3. שלוש

ניסיון

[Ghostwheel]

As you can see, the bold text (not listed) is aligned correctly with no problems but the listed items under it are not. Moreover, the closing tag of the RTL is showing at the bottom for some reason.

I'm getting the same result with markdown numbered list in Hebrew:

ניסיון

1. אחת
2. שתיים
3. שלוש

ניסיון

Using the BBcode for numbered lists breaks the RTL.
Try this solution:

Using the BBcode RTL, but not using a list, just numbering (without brackets) with BR within brackets [בר - אבל באנגלית] for line breaks:

1. שורה ראשונה
2. שורה שניה
3. שורה שלישית

Here's the code for the above:

[RTL]1. שורה ראשונה[BR]2. שורה שניה[BR]3. שורה שלישית[/RTL]

[duome]

Not only is the alignment control useful to users by allowing them to align texts in a certain way (left | center | right | justified), but for certain languages that are inscribed from right to left, like Arabic which I am a native of, this is essential to add.

Please take a look at this if it is any help.
https://phpbbstudio.com/kb/bbcodes/text-alignment

• does ALIGN

• work for you now?..

and what about RTL?..

• does RTL

• still break lists?..

(yes, it adds this horizontal scrolling now)

[Alivated]

Testing

unlisted item

1. listed item

2. listed item

3. listed item

---

اختبار

عنصر غير مدرج

1. عنصر مدرج

2. عنصر مدرج

3. عنصر مدرج

[Alivated]

• does ALIGN

• work for you now?..

and what about RTL?..

• does RTL

• still break lists?..

(yes, it adds this horizontal scrolling now)

RTL does not break lists now, and the addition of alignment code is great.
I think the appearance of the scrolling bar has to do with the padding of the list code. You can see in the reply above that the bullets for the listed items do not stick with the text when it is centered, in both English and Arabic texts. It needs some tweaking.

I inspected the padding of the list marker in the attached screenshot if it's going to be any help for you.

[duome]

I think the appearance of the scrolling bar has to do with the padding of the list code.

Yeah, I had the same idea so I tweaked the RTL code to allow more padding for those bullets on the right side. Looks better now.. )

[Alivated]

Looks better now.. )

It definitely does. Well done and thank you!

---

You can see in the reply above that the bullets for the listed items do not stick with the text when it is centered, in both English and Arabic texts. It needs some tweaking.

• Do you think that

• you can tackle this issue somehow?

[duome]

list-style-position: inside; - doesn't help, I will need to look closer..

edit: display: inline-block; - kind of helps, but please, pay attention and tell me if it breaks someting elsewhere

[Alivated]

ltr

• 1

• 2

--

rtl

• 1

• 2

---

ltr

• 1

• 2

--

rtl

• 1

• 2

---

ltr

rtl

[Alivated]

edit: display: inline-block; - kind of helps, but please, pay attention and tell me if it breaks someting elsewhere

Below are a couple of remarks that I would like to point out after testing the center alignment with list markdowns in both Arabic and English:

• Because Arabic (RTL) has padding-right: 20px in element.style, English text should as well be padded by 20px from left in order to make texts in both languages appear in the same middle when centralized.

• Listed items in the English text have a margin of 41.813px, while Arabic listed items have also the same margin on the right (that has no effect because Arabic is RTL), but have a margin of 0px on the left. I suggest they both be set to 30px or even 40px (right margin for English and left margin for Arabic). I tested it and it looked good enough.

[Corinnebelle]

I am having trouble getting things into bold in Hebrew. שלום, מה קורה

שלום, מה קורה

BBcode does not work in a way that you can edit, although it seems to display correctly. Markdown gets confused when I try to bold the last word.

קטן, גדול, חדש, ישן, חם, קר

|קטן, גדול, חדש, ישן, חם, ק|ר

Only letters between || should be bold.

Only markdown works BBcode does not. I think Duome said there's only a partial pack for Hebrew. Any work arounds?

[luo-ning]

I am having trouble getting things into bold in Hebrew. שלום, מה קורה

Wrapping a word looks wrong in the editor:

Code: Select all

**שלום**, מה קורה
[b]שלום[/b], מה קורה

but renders correctly in the post:

שלום, מה קורה
שלום, מה קורה

The reason it looks wrong in the editor is that the overall direction of the editor is set to LTR. Strings of Hebrew/Arabic text have intrinsic left-to-right directionality that coerces them into RTL, but strings such as ** have no intrinsic directionality (hence the "start" one appears at the "end", i.e. left, of the Hebrew string); and the [b] tags have intrinsic LTR directionality due to containing Latin text, so wrapping them around a Hebrew word forces that full word to the left of the line.*

However, once rendered into HTML tags, the correct directionality is restored, as HTML tags aren't treated as text but rather elements on the page.

It might be worth adding an LTR/RTL toggle for the editor itself, to help when composing mostly-RTL posts. So then it'd look like this during composing:

Code: Select all

**שלום**, מה קורה
[b]שלום[/b], מה קורה

Note that this is still the exact same text as above! But it looks correct, because the overall direction is now RTL.

---

*This is an oversimplification, because the rules for how text directionality on computers works are surprisingly complex, but it captures the essence. This article is also a great intro if you're interested.

[Corinnebelle]

I am having trouble getting things into bold in Hebrew. שלום, מה קורה

Wrapping a word looks wrong in the editor:

Code: Select all

**שלום**, מה קורה
[b]שלום[/b], מה קורה

but renders correctly in the post:

שלום, מה קורה
שלום, מה קורה

The reason it looks wrong in the editor is that the overall direction of the editor is set to LTR. Strings of Hebrew/Arabic text have intrinsic left-to-right directionality that coerces them into RTL, but strings such as ** have no intrinsic directionality (hence the "start" one appears at the "end", i.e. left, of the Hebrew string); and the [b] tags have intrinsic LTR directionality due to containing Latin text, so wrapping them around a Hebrew word forces that full word to the left of the line.*

However, once rendered into HTML tags, the correct directionality is restored, as HTML tags aren't treated as text but rather elements on the page.

It might be worth adding an LTR/RTL toggle for the editor itself, to help when composing mostly-RTL posts. So then it'd look like this during composing:

Code: Select all

**שלום**, מה קורה
[b]שלום[/b], מה קורה

Note that this is still the exact same text as above! But it looks correct, because the overall direction is now RTL.

---

*This is an oversimplification, because the rules for how text directionality on computers works are surprisingly complex, but it captures the essence. This article is also a great intro if you're interested.

That sounds like a great idea! Once you put BBcode in you can't really do any more editing, and it's scary to remove it because it's confusing.

What about is there a way to prevent the code influencing the whole of the text like it does when I try to bold something at the end?

[duome]

I suggest they both be set to 30px or even 40px (right margin for English and left margin for Arabic). I tested it and it looked good enough.

it was "0.8em 0 0.9em 3em" in css, so I "mirrored" the values for <div dir="RTL">

[Alivated]

It's perfect.
I checked it before -- after your reply -- and the horizontal scrollbar was back because the padding of the list items for rtl was on the other direction. I guess you have already fixed it since then. Very well done!

---

ltr

• list item
• list item

rtl

• list item
• list item

---

centralized ltr text example
نص نص نص نص نص نص نص نص

centralized rtl text example
نص نص نص نص نص نص نص نص