libui icon indicating copy to clipboard operation
libui copied to clipboard

is this lib support rtl language like Arabic language

Open mohammed-altmimi opened this issue 4 years ago • 6 comments

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

mohammed-altmimi avatar Mar 22 '20 19:03 mohammed-altmimi

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 avatar Mar 22 '20 20:03 andlabs

thank you .

mohammed-altmimi avatar Mar 22 '20 21:03 mohammed-altmimi

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,

image

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.

image

image

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.

image


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.

image

(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.

image

(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.

image

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

image


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>

image

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>

image

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>

image

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

image

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,

image

We can follow Chrome on other platforms also.

ebraminio avatar Mar 23 '20 15:03 ebraminio

@ebraminio thank you

mohammed-altmimi avatar Mar 27 '20 11:03 mohammed-altmimi

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.

image

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,

image

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)

related: https://docs.microsoft.com/en-us/globalization/localizability/mirroring-in-win32

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

ebraminio avatar Mar 31 '20 20:03 ebraminio

Would be nice if libui could support this.

I assume one problem is testing the code, that it works. Anyone making this work with libui first probably has an easy time getting this in (with documentation!).

rubyFeedback avatar Jan 10 '21 00:01 rubyFeedback