Traduzir uma aplicação web para árabe ou hebraico é a metade fácil. A metade difícil é que a página inteira precisa ser lida da direita para a esquerda: a barra lateral vai para o outro lado, os steppers contam a partir da direita, os balões de chat trocam de lugar, uma árvore recua para o outro lado. Fazer isso à mão significa um atributo dir, uma versão diferente do Bootstrap e uma segunda versão de cada regra CSS própria que você já escreveu.
O sgcHTML no sgcWebSockets 2026.10 faz tudo isso por você. Escolha o idioma e o layout acompanha.
Uma linha
uses
sgcHTML_Locale;
sgcHTMLSetLanguage(htmlLangArabic);
Isso muda os textos internos dos componentes para árabe, como antes, e agora também a direção de cada página que você renderizar depois. Volte para qualquer outro idioma e as páginas voltam a ser da esquerda para a direita.
Ou apenas o código do idioma
Você não precisa de uma tradução interna para obter o layout. Se o idioma da página é um idioma da direita para a esquerda, isso já basta:
Site.Lang := 'he'; { Hebrew: right-to-left, no other change }
O sgcHTML reconhece árabe, hebraico, persa, urdu, pachto, iídiche, divehi, uigur, curdo central e sindi, com ou sem região, então ar-EG e he-IL também funcionam.
O que muda na página
- A tag
<html>recebedir="rtl". - A página carrega a folha de estilos da direita para a esquerda do Bootstrap no lugar da normal. Ela está embutida na biblioteca e é servida em
/bootstrap.rtl.min.css, e a opção de CDN passa para a cópia do CDN. Um caminho de folha de estilos seu é deixado como está. - Os componentes sgcHTML são espelhados: a barra lateral do site e o trilho de ícones, steppers, linha do tempo, chat, presença, tree view, slider, splitter, redimensionamento de colunas do grid e colunas congeladas, notificações, avatares e o quadro kanban.
- Gráficos, medidores, instrumentos e o eixo de tempo do Gantt mantêm a geometria de propósito. Uma escala de valores ou uma linha do tempo são dados, não ordem de leitura.
As páginas da esquerda para a direita não mudam
O espelhamento é feito com regras extras que valem apenas dentro de uma página da direita para a esquerda. Nenhuma regra existente foi reescrita, então uma página em inglês renderiza exatamente a mesma marcação de antes, e continua funcionando em navegadores embarcados mais antigos que não entendem as propriedades lógicas mais novas do CSS.
Forçando uma direção
A escolha automática sempre pode ser substituída. Dir no componente de site, e HtmlDir no page builder, na página de login e no template do Bootstrap, aceitam 'rtl' ou 'ltr'. Deixe vazio para o modo automático.
Site.Lang := 'ar';
Site.Dir := 'ltr'; { Arabic text, left-to-right layout }
C++Builder e .NET
O C++Builder usa as mesmas units. A versão .NET tem o mesmo recurso, com a mesma saída:
sgcHTMLLocaleFactory.sgcHTMLSetLanguage(TsgcHTMLLanguage.htmlLangArabic);
site.Lang = "ar";
site.Dir = ""; // empty means automatic
Experimente
O novo demo 22.RTL mostra uma página em inglês, árabe e hebraico, com um link que força a esquerda para a direita para você comparar. Ele vem em dois formatos para Delphi, construído em código em Demos\60.HTML\01.RunTime\22.RTL e construído a partir de formulários em Demos\60.HTML\02.DesignTime\22.RTL, e em C# em demos\60.HTML\22.RTL. Você também pode abri-lo online.
Veja a página do produto sgcHTML para a lista completa de componentes.
Leia a seguir
Assista
Há um vídeo curto sobre isso no canal da eSeGeCe.
Dúvidas, comentários ou ajuda com a migração? Entre em contato. Você receberá uma resposta de quem escreveu o código.