Translating a web application into Arabic or Hebrew is the easy half. The hard half is that the whole page has to read from right to left: the sidebar moves to the other side, steppers count from the right, chat bubbles swap places, a tree indents the other way. Doing that by hand means a dir attribute, a different build of Bootstrap and a second version of every custom CSS rule you ever wrote.
sgcHTML in sgcWebSockets 2026.10 does all of it for you. Choose the language and the layout follows.
One Line
uses
sgcHTML_Locale;
sgcHTMLSetLanguage(htmlLangArabic);
That switches the built-in texts of the components to Arabic, as before, and now also the direction of every page you render afterwards. Switch back to any other language and the pages are left-to-right again.
Or Just the Language Code
You do not need a built-in translation to get the layout. If the page language is a right-to-left one, that is enough:
Site.Lang := 'he'; { Hebrew: right-to-left, no other change }
sgcHTML recognises Arabic, Hebrew, Persian, Urdu, Pashto, Yiddish, Dhivehi, Uyghur, Central Kurdish and Sindhi, with or without a region, so ar-EG and he-IL work too.
What Changes on the Page
- The
<html>tag getsdir="rtl". - The page loads Bootstrap's right-to-left stylesheet instead of the normal one. It is embedded in the library and served at
/bootstrap.rtl.min.css, and the CDN option switches to the CDN copy. A stylesheet path of your own is left alone. - The sgcHTML components mirror: the site sidebar and icon rail, steppers, timeline, chat, presence, tree view, slider, splitter, grid column resizing and frozen columns, notifications, avatars and the kanban board.
- Charts, gauges, instruments and the Gantt time axis keep their geometry on purpose. A value scale or a time line is data, not reading order.
Left-to-Right Pages Do Not Change
The mirroring is done with extra rules that apply only inside a right-to-left page. No existing rule was rewritten, so an English page renders exactly the markup it rendered before, and it still works in older embedded browsers that do not understand the newer CSS logical properties.
Forcing a Direction
The automatic choice can always be overridden. Dir on the site component, and HtmlDir on the page builder, the login page and the Bootstrap template, accept 'rtl' or 'ltr'. Leave them empty for automatic.
Site.Lang := 'ar';
Site.Dir := 'ltr'; { Arabic text, left-to-right layout }
C++Builder and .NET
C++Builder uses the same units. The .NET version has the same feature, with the same output:
sgcHTMLLocaleFactory.sgcHTMLSetLanguage(TsgcHTMLLanguage.htmlLangArabic);
site.Lang = "ar";
site.Dir = ""; // empty means automatic
Try It
The new demo 22.RTL shows one page in English, Arabic and Hebrew, with a link that forces left-to-right so you can compare. It comes in two flavours for Delphi, built in code in Demos\60.HTML\01.RunTime\22.RTL and built from forms in Demos\60.HTML\02.DesignTime\22.RTL, and in C# in demos\60.HTML\22.RTL. You can also open it online.
See the sgcHTML product page for the full component list.
Read Next
Watch It
There is a short video of this on the eSeGeCe channel.
Questions, feedback or migration help? Get in touch. You will get a reply from the people who wrote the code.