Libui: is this lib support rtl language like Arabic language

Created on 22 Mar 2020 · 5Comments · Source: andlabs/libui

is this lib support rtl language like Arabic language
"السلام عليكم "
because i try nana lib and fltk and they had issue
for supporting arabic and Hebrew
not full support

Source

mohammed-altmimi

Most helpful comment

This library does support writing Arabic text and apparently support layout RTL alignment when is set implicitly through but no support for explicit setting direction.

Asked to put my comment here, here are winform's right to left direction properties,

See https://documentation.devexpress.com/WindowsForms/115871/Build-an-Application/Right-to-Left-Layout/How-to-Enable-RTL-Mode-for-Form-s-Controls-Strings-and-Images-in-a-Multiple-Culture-Application for example.

(should add more background on what direction vs alignment means and so later)

On win32, there are multiple flags related to direction on CreateWindowEx and friends, as listed on https://stackoverflow.com/q/55486815

AFAICU WS_EX_RIGHT should never have been existed, apparently its effect is removed somewhere between XP and Windows 10 per the above link, WS_EX_RTLREADING is apparently about text alignment, WS_EX_LAYOUTRTL is about direction of the layout. Will explain better on the following parts.

In Android, itself not in scope of libui of course, EX_RTLREADING should align to android:layoutDirection and EX_LAYOUTRTL aligns to android:layoutDirection the two attributes applies to each view/components in Android.

And there is an application wide flag to an app can state if it supports RTL layout android:supportsRtl so no automatic aligning component from right (RTL direction) happens if such flag is not set in Android even if OS's language is RTL.

HTML has two things, not completely aligning to above things maybe, there is a HTML tags attributed, dir which is the same as direction of CSS, and there is a text-align.

Compare these:

data:text/html,<div style="direction: ltr; text-align: left;">This is a sample text.

data:text/html,<div dir=ltr style="text-align: left;">This is a sample text.

(are the same am using the attribute notation which is favorable)

data:text/html,<div dir=rtl style="text-align: left;">This is a sample text.

(note the dot location)

But what happens if no text-align is set, the default style for text-align in browsers is not left or right but is begin which means right in RTL context and left in LTR context.

data:text/html,<div dir=rtl style="text-align: start;">This is a sample text.

data:text/html,<div dir=rtl>This is a sample text.

Have a look at this for the general idea of HTML direction in its simplest form:

data:text/html,<body dir="ltr"><div style="width: 320px"><textarea style="text-align: end">Text</textarea><fieldset><legend>Form:</legend><div><progress max=100 value=20 /></div><div><select><option>Option 1</option><option>Option 2</option></select></div><div><select style="height: 120px" multiple><optgroup label="Group 1"><option>Option 1</option><option selected>Option 2</option></optgroup><optgroup label="Group 2"><option>Option 3</option></optgroup></select></div><button>OK</button></fieldset></div>

data:text/html,<body dir="rtl"><div style="width: 320px"><textarea style="text-align: end">Text</textarea><fieldset><legend>Form:</legend><div><progress max=100 value=20 /></div><div><select><option>Option 1</option><option>Option 2</option></select></div><div><select style="height: 120px" multiple><optgroup label="Group 1"><option>Option 1</option><option selected>Option 2</option></optgroup><optgroup label="Group 2"><option>Option 3</option></optgroup></select></div><button>OK</button></fieldset></div>

There is also a dir=auto which is not default in CSS for some reason,

data:text/html;charset=utf8,<div dir="auto">Hello</div><div dir="auto">%D8%B3%D9%84%D8%A7%D9%85</div>

It is equivalent to anyRtl and firstStrong* of Android with the difference that that in CSS it is applied to dir/direction but in Android it is applied to text-align which any of them can make sense somehow. Some GTK component are also detecting alignment/direction based on content like above which is hard to replicate in other platforms somehow and no need to deal with it in first round of works.

So with all these what I suggest for libui? Just like <body> tag's dir in above example, I think we need just one property for window object and not for each view for now, uiWindowSetDirection(bool), which sets direction to RTL and aligns texts from right also (CSS's text-align: begin or android:textDirection) if is set, we can add to the granularity later upon user requests.

Extra point: Flipping window bar

From https://stackoverflow.com/a/35113453

Which one I suggest? Flipping window bar and making it unlike OS's language is win32 specific thing, not replicable on other platforms AFAICU, but depends if we go for window direction or individual components direction I believe, I am in favor of the first if we go for RTL direction as it is wahat Chrome does that for its UI when ran with chrome --lang=fa for example,

We can follow Chrome on other platforms also.

ebraminio on 23 Mar 2020

👍2

All 5 comments

It uses the native OS toolkits underneath, so it should theoretically support RTL configurations. However, I haven't actually tested this yet, and furthermore I'm not sure what modifications I need to make to actually opt into doing that, should opting in be necessary (for instance, on Windows, I'm not sure if WS_EX_RTLLAYOUT should or should not be explicitly specified). The remodel branch is introducing a testing framwork which will allow me to automate testing RTL support, though.

andlabs on 22 Mar 2020

👍1

thank you .

mohammed-altmimi on 22 Mar 2020

This library does support writing Arabic text and apparently support layout RTL alignment when is set implicitly through but no support for explicit setting direction.

Asked to put my comment here, here are winform's right to left direction properties,

(should add more background on what direction vs alignment means and so later)

On win32, there are multiple flags related to direction on CreateWindowEx and friends, as listed on https://stackoverflow.com/q/55486815

HTML has two things, not completely aligning to above things maybe, there is a HTML tags attributed, dir which is the same as direction of CSS, and there is a text-align.

Compare these:

data:text/html,<div style="direction: ltr; text-align: left;">This is a sample text.

data:text/html,<div dir=ltr style="text-align: left;">This is a sample text.

(are the same am using the attribute notation which is favorable)

data:text/html,<div dir=rtl style="text-align: left;">This is a sample text.

(note the dot location)

But what happens if no text-align is set, the default style for text-align in browsers is not left or right but is begin which means right in RTL context and left in LTR context.

data:text/html,<div dir=rtl style="text-align: start;">This is a sample text.

data:text/html,<div dir=rtl>This is a sample text.

Have a look at this for the general idea of HTML direction in its simplest form:

There is also a dir=auto which is not default in CSS for some reason,

data:text/html;charset=utf8,<div dir="auto">Hello</div><div dir="auto">%D8%B3%D9%84%D8%A7%D9%85</div>

Extra point: Flipping window bar

From https://stackoverflow.com/a/35113453

We can follow Chrome on other platforms also.

ebraminio on 23 Mar 2020

👍2

@ebraminio
thank you

mohammed-altmimi on 27 Mar 2020

👍1

In Gtk it is easy as putting

gtk_widget_set_default_direction (GTK_TEXT_DIR_RTL);

Somewhere. Ideally it should be set to a window rather than a process but I couldn't make it work to be honest.

In Win32 it should work like

diff --git a/windows/window.cpp b/windows/window.cpp
index 2ea5b7c..3ddb232 100644
--- a/windows/window.cpp
+++ b/windows/window.cpp
@@ -468,6 +468,7 @@ uiWindow *uiNewWindow(const char *title, int width, int height, int hasMenubar)
 #define style WS_OVERLAPPEDWINDOW
 #define exstyle 0

+       SetProcessDefaultLayout(LAYOUT_RTL);
        wtitle = toUTF16(title);
        w->hwnd = CreateWindowExW(exstyle,
                windowClass, wtitle,

but it isn't.

And not sure about macOS so some help is needed to see why we can't have the same using SetProcessDefaultLayout (or even adding WS_EX_LAYOUTRTL to exstyle won't make it better)

And some other help would be needed for macOS, if it can be done like GTK that won't need libui support even.

ebraminio on 31 Mar 2020

Was this page helpful?

0 / 5 - 0 ratings