GH GambleHub

RTL 지원

1) 원칙

1. RTL은 텍스트의 번역이 아니라 사고의 반영입니다. 축, 읽기 순서, 초점 순서, 제스처 및 탐색 변경.
2. 왼쪽/오른쪽 대신 논리적 CSS 속성. '마진 인라인 시작', '인셋 인라인 엔드', '테두리 시작 시작 반경' 등으로 이동하십시오.
3. 전 세계적으로 방향을 켜고 LTR 조각을 국부적으로 분리하십시오. 숫자, IM, 코드, 전자 메일 및 IBAN은 항상 왼쪽에서 오른쪽으로 읽습니다.
4. 의미가 아닌 방향에 의존하는 것을 미러링하십시오. "재생", "발음", "발음" 및 시계/프로세스 아이콘이 반영되지 않을 수 있습니다.
5. 의사 -RTL을 테스트하십시오. 종료하기 전에 'dir = "rtl" '/' 방향: rtl' 및 의사 변환을 포함합니다.

2) 방향: 'dir' 및 부울 속성

전 세계적으로 문서/루트: 
html
<html lang="ar" dir="rtl"> … </html>
부울 속성 (왼쪽/오른쪽 교체): 
css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }
방향 선택기: 
css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }
사용자 컨텐츠의 로컬 자동 초점: 
html
<p dir="auto">…</p>

3) BiDi 및 혼합 텍스트 격리

아랍어/히브리어와 라틴어/숫자를 혼합하면 문자 순서가 깨집니다. BiDi 격리 사용:
  • 태그: '' (분리 방향), ' '(힘 무시).
유니 코드 토큰:
  • '\u2066 'LRI/'\u2067' RLI-LTR/RTL 격리의 시작, '\u2069 'PDI-end,
  • '\u200E 'LRM/'\u200F' RLM-짧은 인서트를위한 단일 바이트 토큰.
계정 번호 및 통화가있는 문구 예: 
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>

4) 탐색, 계층 구조 및 레이아웃

빵 부스러기: 거울 순서:
  • 패널/메뉴: 메인 navbar-오른쪽; "뒤" 는 왼쪽 (RTL 라인의 시작) 을 가리 킵니다.
  • 카드/목록: 헤더를 인라인 스타트에 정렬합니다. 상태 아이콘 - 인라인 엔드로.
  • 회전 목마 및 스 와이프: 인라인 스타트 방향 (RTL-오른쪽) 으로 스크롤합니다. 페이지 표시기도 미러링됩니다.
  • 페이지 화: 화살표 "다음" 은 인라인 시작, "이전" -인라인 끝으로갑니다.

5) 아이콘과 이미지

미러 방향 아이콘: 화살표, "앞으로/뒤로", 플레이 헤드 "확장/붕괴".
미러링하지 마십시오: 텍스트, 그래프, 시간 (실시간 화살표가있는 경우), 브랜드 로고의 아이콘.

기술적으로: 
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }

SVG의 경우: '변환 상자: 보기 상자;' 를 사용하십시오. "부동" 을 피하기 위해.

이미지 내부의 텍스트를 피하십시오 → 별도의 레이어로 현지화

6) 양식 및 입력

내용 정렬: 텍스트 정렬: 시작; '텍스트 필드, 숫자/금액/IM/e-mail-LTR.

속성: 
html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">

장소/라벨은 현지화되어 있지만 숫자/코드의 캐럿은 왼쪽에서 오른쪽으로 이동해야합니다.
마스크: 캐럿을 가혹하게 "차단" 하지 마십시오. 삽입 및 선택을 지원합니다.
목록/라디오/체크 박스: 컨트롤 오른쪽에 서명하고 영역을 44 × 44 px 이상 클릭하십시오.
최소 → 최대 슬라이더: RTL에서 최소한 오른쪽 가장자리에서 최대 왼쪽에 있습니다 (또는 반전 및 LTR 번호가없는 스케일 표시).

7) 숫자, 날짜, 통화

기본적으로 아랍어 로케일은 아랍어-인도 구체를 사용합니다. 해결책-비즈니스 정책:
  • 재무 UI에서는 상호 운용성을 위해 라틴어 번호 (0-9) 가 더 자주 표시되지만 형식 (공간/표시) 은 로케일입니다.
'Intl 사용. '대상 로케일: 
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());

상대 시간 ('Intl. RelativeTimeform '), 방향 구분 기호 및 로컬 일/월 약어.

8) 타이포그래피 및 가독성

좋은 아랍어/히브리어 그래프 및 합자 (아랍어 형성) 를 사용한 글꼴.
선 간격 1. 4–1. 6; 좁은 추적을 피하십시오.
아랍어의 경우 너비를 정렬 할 때 kashida (길이 스트로크) 가 허용됩니다-조심스럽게 켜십시오 ('텍스트 정당화: 단어 간; '/엔진 지원).
아랍어 라인 내부의 라틴 이탤릭체를 금지합니다 (세로 리듬을 망칩니다).

9) 그래프, 스케일 및 테이블

X 축은 오른쪽에서 왼쪽으로 이동합니다. 전설은 인라인 엔드와 일치합니다.
테이블 열: "기본" 열 (이름/게임) - 오른쪽; 숫자/금액은 LTR로 유지되고 인라인 엔드에 정렬 될 수 있습니다.

"+/-" 부호 및 백분율-숫자 앞에 LTR 숫자가 분리됩니다

html
<bdi dir="ltr">+12. 5%</bdi>

10) A11y 및 스크린 리더

'lang = "ar" '/' lang = "he"' 가 노출되어 있는지 확인하십시오. TTS 엔진은 올바른 음성 연기를 선택합니다.
조심스럽게 방향의 소리 동적 변경-조각에서 'dir' 을 불필요하게 전환하지 마십시오.
라이브 업데이트 ('aria-live = "polite"') -방향을 혼합하지 않은 텍스트.
아이콘은 텍스트 레이블없이 의미를 전달하지 않습니 '아리아 라벨' 을 사용하십시오.

11) iGaming의 세부 사항

11. 1 베팅 쿠폰 (betslip)

현장 순서: 양 → 비율 → 잠재적 이득; 올바른 서명, LTR 번호/요인.
계수를 부드럽게 업데이트하십시오. 위/아래 화살표를 반영 할 필요는 없습니다 (가격 방향의 의미는 보편적입니다).

11. 일치/시장 2 개

리그/이벤트 목록을 인라인 스타트 (오른쪽 RTL) 로 정렬하십시오.
타이머 및 카운트 - 테이블 자리가있는 LTR 'dir = "ltr"' ('글꼴-변형-숫자: 표-nums; ').

11. 3 지불/ACC

IBAN/BIC/전화 필드는 항상 LTR입니다.
은행 이름/주소-RTL.
오류/유효성 검사기는 오른쪽에 마커를 표시합니다.

11. 4 개의 토너먼트/리더 보드

열: 위치, 닉네임, 안경-오른쪽 위치; 안경을 인라인 엔드 (LTR 숫자) 에 정렬하십시오.

12) 제조 및 테스트

처녀의 의사 -RTL: 
css html. debug-rtl { direction: rtl; }
RTL의 자동 미러 아이콘 (방향 전용): 
css html:dir(rtl). icon-dir { transform: scaleX(-1); }
자동 테스트 (아이디어의 예):
  • 'dir = rtl' 의 레이아웃 스냅 샷.
  • CSS (lint) 에서 '왼쪽/오른쪽' 이 없는지 확인합니다.
  • E2E: 탁상 순서, 회전 목마 스 와이프, 슬라이더 동작.
  • 아랍어 텍스트 + LTR 인서트를 사용한 시각적 테스트 (전자 메일, 합계).

13) 디자인 시스템 토큰 (예)

json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}

14) 스니펫

응용 프로그램의 방향을 전환하려면 (반응): 
tsx import { useEffect } from "react";

export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}
목록/빵 부스러기 조화: 
css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }
LTR 단편으로서의 숫자와 합: 
html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>
RTL의 분 → 최대 슬라이더: 
css html:dir(rtl) input[type="range"] { direction: rtl; }

15) 안티 패턴

→ 스타일의 하드 '왼쪽/오른쪽' 은 RTL을 깨뜨립니다.
'dir = "ltr"' → "깨진" 캐럿 및 순서없이 숫자/IBAN/PK을 입력합니다.
미러 로고/차트/시간.
예외없이 동일한 아이콘 세트가 항상 미러링됩니다.
회전 목마, 전단지 및 페이지 작성은 거꾸로되어 있지 않습니다.
BiDi 격리가없는 혼합 문자열 → "춤" 문자.

16) 지표

RTL 적용 범위: RTL 검토를받은 화면의 비율.
BiDi 결함/릴리스: 혼합 텍스트 버그 수.
리드 타임 (LTR vs RTL):> 5-10% 를 다르게해서는 안됩니다.
숫자 형태의 입력 오류-잘못된 캐럿/마스크가있는 이벤트의 백분율.
CLS/perf: 'dir' 이 전환 될 때 레이아웃이 점프되지 않습니다.

17) QA 체크리스트

방향과 레이아웃

RTL 로케일의 경우 [] '<html dir = "rtl">'; ': dir (rtl)' 스타일이 적용됩니다.

  • '왼쪽/오른쪽' 대신 부울 속성.
  • Navigation/bredkramby/carousels/pagination zerkalitsya를 올바르게 사용하십시오.

텍스트와 BiDi

  • 숫자/통화/IM/전자 메일- 'dir = "ltr"' 또는 ''.
  • 혼합 문자열에 "반전 된" 문자가 없습니다.
  • 'Intl을 통한 현지화 된 날짜/통화. '.

양식

  • 오른쪽 라벨; 44 × 44 px 이상의 영역을 클릭하십시오.
  • 전화/IBAN/양-LTR 캐럿, 올바른 마스크.
  • 슬라이더/로우/하이는 예상대로 작동합니다.

아이콘/이미지

  • 방향 만 미러링됩니다. 예외가 충족됩니다.
  • 로컬 버전이없는 그림에는 텍스트가 없습니다.

할 수 없음/성능

  • 'lang' 노출; SR이 올바르게 읽습니
  • 'dir' 을 변경할 때 불필요한 다시 그리기가 없습니다.
  • 대조/초점 링은 AA에 해당합니다.

18) 설계 시스템의 문서

Direction & BiDi 섹션: 미러링 정책, 아이콘 예외 목록.
RTL 토큰 세트와 스타일 린터 ('왼쪽/오른쪽' 금지).
Do/Do n 't Gallery: 회전 목마, bredcrambs, 숫자 양식, 슬라이더, 그래프.
Pseudo-RTL 스크립트 및 검토 체크리스트.

간략한 요약

적절한 RTL 지원은 논리적 CSS 특성, 의식 미러링 및 엄격한 BiDi 격리입니다. LTR의 숫자/IM, 거울 탐색 및 방향 아이콘을 분리하고 모양을 예측할 수 있으며 그래프를 읽을 수 있습니다. 따라서 아랍어, 히브리어, 페르시아어 또는 우르두어에 대한 인터페이스는 베팅 쿠폰 및 지불 양식에서 토너먼트 테이블 및 라이브 경기에 이르기까지 자연스럽고 빠

Contact

문의하기

질문이나 지원이 필요하시면 언제든지 연락하십시오.우리는 항상 도울 준비가 되어 있습니다!

Telegram
@Gamble_GC
통합 시작

Email — 필수. Telegram 또는 WhatsApp — 선택 사항.

이름 선택 사항
Email 선택 사항
제목 선택 사항
메시지 선택 사항
Telegram 선택 사항
@
Telegram을 입력하시면 Email과 함께 Telegram에서도 답변드립니다.
WhatsApp 선택 사항
형식: +국가 코드 + 번호 (예: +82XXXXXXXXX).

버튼을 클릭하면 데이터 처리에 동의하는 것으로 간주됩니다.