Traducir una aplicación web al árabe o al hebreo es la parte fácil. La parte difícil es que toda la página debe leerse de derecha a izquierda: la barra lateral pasa al otro lado, los asistentes por pasos cuentan desde la derecha, las burbujas del chat intercambian su posición, un árbol se sangra hacia el otro lado. Hacerlo a mano supone un atributo dir, otra versión de Bootstrap y una segunda versión de cada regla CSS propia que hayas escrito.
sgcHTML en sgcWebSockets 2026.10 lo hace todo por ti. Elige el idioma y el diseño lo sigue.
Una sola línea
uses
sgcHTML_Locale;
sgcHTMLSetLanguage(htmlLangArabic);
Eso cambia los textos integrados de los componentes al árabe, como antes, y ahora también la dirección de cada página que se genere a partir de ese momento. Si vuelves a cualquier otro idioma, las páginas vuelven a ir de izquierda a derecha.
O solo el código de idioma
No necesitas una traducción integrada para obtener el diseño. Si el idioma de la página es de derecha a izquierda, con eso basta:
Site.Lang := 'he'; { Hebrew: right-to-left, no other change }
sgcHTML reconoce árabe, hebreo, persa, urdu, pastún, yidis, divehi, uigur, kurdo central y sindhi, con o sin región, de modo que ar-EG y he-IL también funcionan.
Qué cambia en la página
- La etiqueta
<html>recibedir="rtl". - La página carga la hoja de estilos de derecha a izquierda de Bootstrap en lugar de la normal. Está incluida en la biblioteca y se sirve en
/bootstrap.rtl.min.css, y la opción de CDN cambia a la copia del CDN. Una ruta de hoja de estilos propia se deja tal cual. - Los componentes sgcHTML se reflejan: la barra lateral del sitio y el carril de iconos, los asistentes por pasos, la línea de tiempo, el chat, la presencia, la vista de árbol, el deslizador, el divisor, el cambio de tamaño de columnas del grid y las columnas fijas, las notificaciones, los avatares y el tablero kanban.
- Los gráficos, los medidores, los instrumentos y el eje de tiempo del Gantt mantienen su geometría a propósito. Una escala de valores o una línea de tiempo son datos, no un orden de lectura.
Las páginas de izquierda a derecha no cambian
El reflejo se hace con reglas adicionales que solo se aplican dentro de una página de derecha a izquierda. No se ha reescrito ninguna regla existente, así que una página en inglés genera exactamente el mismo marcado que antes, y sigue funcionando en navegadores embebidos antiguos que no entienden las propiedades lógicas más recientes de CSS.
Forzar una dirección
La elección automática siempre se puede sobrescribir. Dir en el componente del sitio, y HtmlDir en el generador de páginas, la página de inicio de sesión y la plantilla de Bootstrap, aceptan 'rtl' o 'ltr'. Déjalos vacíos para el modo automático.
Site.Lang := 'ar';
Site.Dir := 'ltr'; { Arabic text, left-to-right layout }
C++Builder y .NET
C++Builder usa las mismas unidades. La versión .NET tiene la misma función, con el mismo resultado:
sgcHTMLLocaleFactory.sgcHTMLSetLanguage(TsgcHTMLLanguage.htmlLangArabic);
site.Lang = "ar";
site.Dir = ""; // empty means automatic
Pruébalo
La nueva demo 22.RTL muestra una página en inglés, árabe y hebreo, con un enlace que fuerza de izquierda a derecha para que puedas comparar. Viene en dos versiones para Delphi, creada en código en Demos\60.HTML\01.RunTime\22.RTL y creada a partir de formularios en Demos\60.HTML\02.DesignTime\22.RTL, y en C# en demos\60.HTML\22.RTL. También puedes abrirla en línea.
Consulta la página del producto sgcHTML para ver la lista completa de componentes.
Sigue leyendo
Míralo
Hay un breve vídeo sobre esto en el canal de eSeGeCe.
¿Preguntas, comentarios o ayuda con la migración? Ponte en contacto con nosotros. Te responderán las personas que escribieron el código.