웹 애플리케이션을 아랍어나 히브리어로 번역하는 것은 쉬운 절반입니다. 어려운 절반은 페이지 전체가 오른쪽에서 왼쪽으로 읽혀야 한다는 점입니다. 사이드바가 반대편으로 옮겨 가고, 스테퍼는 오른쪽부터 세며, 채팅 말풍선은 자리를 바꾸고, 트리는 반대 방향으로 들여쓰기됩니다. 이를 직접 처리하려면 dir 속성, 다른 빌드의 Bootstrap, 그리고 지금까지 작성한 모든 사용자 정의 CSS 규칙의 두 번째 버전이 필요합니다.
sgcWebSockets 2026.10의 sgcHTML이 이 모든 것을 대신 처리합니다. 언어를 선택하면 레이아웃이 따라옵니다.
단 한 줄
uses
sgcHTML_Locale;
sgcHTMLSetLanguage(htmlLangArabic);
이렇게 하면 이전처럼 컴포넌트의 내장 텍스트가 아랍어로 바뀌고, 이제는 그 이후에 렌더링하는 모든 페이지의 방향도 함께 바뀝니다. 다른 언어로 다시 전환하면 페이지는 다시 왼쪽에서 오른쪽이 됩니다.
또는 언어 코드만으로
레이아웃을 얻기 위해 내장 번역이 필요하지는 않습니다. 페이지 언어가 오른쪽에서 왼쪽으로 쓰는 언어이기만 하면 충분합니다.
Site.Lang := 'he'; { Hebrew: right-to-left, no other change }
sgcHTML은 아랍어, 히브리어, 페르시아어, 우르두어, 파슈토어, 이디시어, 디베히어, 위구르어, 소라니 쿠르드어, 신디어를 지역 코드 유무와 상관없이 인식하므로 ar-EG와 he-IL도 작동합니다.
페이지에서 달라지는 것
<html>태그에dir="rtl"이 지정됩니다.- 페이지는 일반 스타일시트 대신 Bootstrap의 오른쪽에서 왼쪽 스타일시트를 로드합니다. 이 스타일시트는 라이브러리에 내장되어
/bootstrap.rtl.min.css로 제공되며, CDN 옵션을 사용하면 CDN 사본으로 전환됩니다. 직접 지정한 스타일시트 경로는 그대로 둡니다. - sgcHTML 컴포넌트가 미러링됩니다. 사이트 사이드바와 아이콘 레일, 스테퍼, 타임라인, 채팅, 프레즌스, 트리 뷰, 슬라이더, 스플리터, 그리드 열 크기 조정과 고정 열, 알림, 아바타, 칸반 보드가 해당됩니다.
- 차트, 게이지, 계기판, 간트 시간 축은 의도적으로 기하 구조를 유지합니다. 값 눈금이나 시간 선은 읽는 순서가 아니라 데이터이기 때문입니다.
왼쪽에서 오른쪽 페이지는 바뀌지 않습니다
미러링은 오른쪽에서 왼쪽 페이지 안에서만 적용되는 추가 규칙으로 처리됩니다. 기존 규칙은 하나도 다시 작성하지 않았으므로, 영어 페이지는 이전과 정확히 같은 마크업을 렌더링하며, 최신 CSS 논리 속성을 이해하지 못하는 오래된 임베디드 브라우저에서도 계속 작동합니다.
방향 강제 지정
자동 선택은 언제든 재정의할 수 있습니다. 사이트 컴포넌트의 Dir, 그리고 페이지 빌더, 로그인 페이지, Bootstrap 템플릿의 HtmlDir은 'rtl' 또는 'ltr'을 받습니다. 자동으로 두려면 비워 두십시오.
Site.Lang := 'ar';
Site.Dir := 'ltr'; { Arabic text, left-to-right layout }
C++Builder와 .NET
C++Builder는 동일한 유닛을 사용합니다. .NET 버전도 같은 기능을 제공하며 출력도 같습니다.
sgcHTMLLocaleFactory.sgcHTMLSetLanguage(TsgcHTMLLanguage.htmlLangArabic);
site.Lang = "ar";
site.Dir = ""; // empty means automatic
직접 사용해 보기
새 데모 22.RTL은 하나의 페이지를 영어, 아랍어, 히브리어로 보여 주며, 비교할 수 있도록 왼쪽에서 오른쪽을 강제하는 링크가 있습니다. Delphi용으로는 두 가지 방식이 있습니다. Demos\60.HTML\01.RunTime\22.RTL에는 코드로 작성한 버전이, Demos\60.HTML\02.DesignTime\22.RTL에는 폼으로 작성한 버전이 있으며, C#용은 demos\60.HTML\22.RTL에 있습니다. 온라인으로 열어 볼 수도 있습니다.
전체 컴포넌트 목록은 sgcHTML 제품 페이지를 참고하십시오.
다음 글
영상으로 보기
짧은 영상이 eSeGeCe 채널에 있습니다.
질문, 의견, 마이그레이션 지원이 필요하십니까? 문의해 주십시오. 코드를 작성한 사람들이 직접 답변해 드립니다.