입력창과 텍스트영역에 dir="auto"를 추가하세요

 (mough.xyz)
3P by GN⁺ | ★ favorite | 댓글 1개
  • HTML의 dir="auto" 속성 하나만으로 입력창과 텍스트영역에서 히브리어·아랍어·우르두어 같은 RTL(오른쪽-왼쪽) 언어를 자동 지원
  • 기존에는 문자 감지용 리스너 작성, 서드파티 라이브러리 사용, dir="right" 수동 전환 등 수동적이고 복잡한 방식만 알려져 왔음
  • "textarea rtl" 검색 결과 어디에도 dir="auto"가 언급되지 않아, 직접 개입이 필요한 문제로 오인되어 옴
  • 실제 적용 결과 별도 저수준 언어 파싱 없이 즉시 정상 동작
  • 소소하지만 큰 변화로, 전 세계 사용자가 앱을 쓸 수 있느냐를 가르는 국제화(i18n) 핵심 요소

RTL 지원의 어려움

  • Standard Notes 초기부터 히브리어, 아랍어, 우르두어 등 RTL 언어 지원 요청이 들어왔으나, 구현 난이도가 높아 보여 미뤄져 옴
  • 검토할 때마다 유니코드·아스키 등 인코딩을 저수준에서 다뤄야 하는 언어 파싱 작업으로 보여 회피
  • 몇 달마다 같은 주제가 반복됐지만, 매번 동일한 조언만 돌아옴
    • 문자 파서 직접 작성
    • 서드파티 라이브러리 사용
    • dir="right" 적용

검색의 한계

  • "textarea rtl", "textarea right to left" 등으로 검색해도 결과에 dir="auto"가 전혀 등장하지 않음
  • 대신 dir="rtl"을 태그에 쓰라는 Stack Overflow 답변이나 Twitter의 서드파티 라이브러리만 노출
  • 검색 첫 페이지만 믿고 직접 개입이 필요한 문제로 단정해, 우선순위에서 계속 밀려남

해결책 발견

  • 몇 주 전 다시 검색하던 중 한 GitHub 글에서 "textarea에 dir="auto"만 추가하면 된다"는 댓글을 발견
  • 1년간 해결책을 찾던 문제가 단 한 줄로 해결됨
  • 직접 적용해 본 결과 결함 없이 완벽하게 동작

적용 방법

  • 입력창·텍스트영역에 속성 한 줄만 추가
    • <textarea dir='auto'> שלום, עתיד. </textarea>
  • 입력값에 따라 텍스트 방향이 자동 판별되는 형태
  • 참고로 MDN의 dir 속성 문서가 관련 설명 제공

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 입력창과 textarea의 텍스트 렌더링을 고치는 쉬운 방법은 맞지만, 제출된 텍스트를 보여주는 요소에도 같은 처리가 필요함
    그리고 양방향 텍스트, 예를 들어 아랍어 문단 안의 영어 제품명 같은 걸 만나면 완전히 다른 복잡도가 열림
    Chrome에는 현재 dir='auto'가 있는 입력창에서 RTL 텍스트 렌더링에 영향을 주는 회귀 버그가 있는데, 수정은 이미 배포되어 다음 릴리스에 포함될 예정임

  • MDN이 늘 구해줌: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

  • 미국 밖에도 세상은 있지만, 사이트 성격에 따라 반드시 지원할 필요는 없음
    미국인도 아니고 영어 원어민도 아니지만, 내가 가는 사이트의 99%는 사용자명이나 게시물에 RTL 문자를 허용하지 않아도 전혀 문제없음
    이게 브라우저나 운영체제 수준에서 해결되지 않았다면, 내가 이를 지원해야 할 의무는 거의 없다고 봄
    그리고 이건 소수자를 억압하자는 얘기가 아님

    • 개인 프로젝트에서 다른 언어 지원을 고민할 때마다 이 점을 떠올림
      빠르게 검색해보면 영어 사용자가 8억 4천만 명 정도라는데, 혼자 만드는 입장에서는 전 세계의 1/10만 쓸 수 있어도 꽤 괜찮아 보임
      더 많은 사람을 지원하려고 범위를 넓히는 건 좋지만, 꼭 그래야 할 의무는 없음
    • 틈새 사용 사례 지원이 단순하고 유지보수 부담도 작다면, 그냥 재미로 넣을 만함

  • “Google 첫 결과 페이지는 절대 거짓말하지 않는다”라니, 문제 해결에 도움이 될 얘기가 있긴 한데 먼저 앉는 게 좋겠음. 아마 슬퍼질 테니까

    • 그 문장을 문자 그대로 받아들인 듯함
      “Google 첫 결과 페이지는 절대 거짓말하지 않는다…”는 표현은 뒤에 나오는 “Google이 입력창의 RTL 지원에 대해 우리에게 거짓말해왔다”라는 문장으로 보아 거의 확실히 풍자였다고 봄

  • 아쉽게도 웹사이트와 연결된 CodePen 모두 소스 렌더링이 꽤 엉망임. 마침표 위치가 틀렸고, 렌더링된 HTML은 괜찮음
    이건 Unicode 양방향 알고리즘이 늘 그렇듯 실패한 것 같음
    HTML 태그, 즉 <와 > 사이 전체를 내부적으로는 LTR인 원자적 단위로 렌더링하되 주변 문자 방향에는 영향을 주지 않는 특수 알고리즘이 필요해 보임
    이 예시에서는 알고리즘이 .< 시퀀스 중간에서 방향을 바꿀 수 있어야 함

    • 여기서 Unicode 양방향 알고리즘은 실패한 게 아니라 설계대로 동작하는 중임
      소스 코드 조각의 기본 방향은 LTR이지만 히브리어 텍스트 때문에 방향이 섞여 있음
      문장부호는 약한 방향성을 가지므로 마침표가 RTL 구간의 끝에 나타나고, 기본 방향이 LTR이기 때문에 그 “끝”은 오른쪽을 의미함
      혼합 방향 콘텐츠를 올바르게 렌더링하도록 강제하려면 특정 방향 구간이 어디서 시작하고 끝나는지 지정하는 양방향 제어 문자를 넣어야 할 때가 많음
      다만 이 경우에는 실제 입력 예시의 렌더링을 망칠 수 있어서 넣는 게 맞지 않음

  • 관련해서, 최근 몇 년 사이 논리 속성/값 지원이 성숙해졌음
    이는 top/left/bottom/right 같은 방향 기반 속성의 대안으로, 콘텐츠나 텍스트 방향 전환에 맞게 적응할 수 있음
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

    • 이런 개념은 모바일 플랫폼에서는 오래전부터 표준이었음. 예를 들어 iOS의 leading과 trailing 같은 것들임
      웹에도 들어오는 걸 보니 좋고, 언어 비의존 UI를 만드는 일이 훨씬 현실적인 작업이 됨

  • textarea와 BiDi 텍스트를 내가 떠올릴 수 있는 거의 모든 조합으로 검색하면 https://www.w3.org/International/talks/1602-oman이 상위 링크 중 하나로 나옴
    그 안의 “What if you don't know the direction in advance” 섹션에도 바로 있음: https://www.w3.org/International/talks/1602-oman/#advance
    문제는 글쓴이가 이 분야를 잘 몰라서, 여기서 검색어로 BiDi가 맞다는 것도 몰랐던 것 같음. “bi-directional text”의 줄임말이고, 특정 쓰기 방향을 지정하고 싶지 않을 때 쓰는 말임
    “검색 결과가 틀렸다”고 생각한 것도 탓하고 싶진 않음. RTL로 검색하면 그 결과는 맞는 답이지만, 이 분야를 조금 더 알기 전까지는 그걸 알 수 없음
    인터넷 답변에 의존할 때의 한계가 드러남. 인터넷은 내가 무엇을 모르는지 모름
    BiDi를 오래 다뤄본 사람에게 물어보면 첫 질문 중 하나가 “RTL을 말하는 건가요, BiDi를 말하는 건가요?”일 가능성이 큼
    가능하다면 소프트웨어보다 사람에게 물어보는 편이 좋음. 특히 그 분야를 잘 모를 때는 더 그렇다

    • 내부자 약어로 “그 분야”를 문지기처럼 다루고 글쓴이를 깎아내리기보다, 이 문제가 더 알려지게 만든 점을 좋게 볼 수도 있음

  • 폼 제출 시 텍스트 입력의 방향성을 함께 포함할 수 있는 흥미로운 속성인 dirname 링크도 추가할 만함: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

  • 브라우저를 만든다면 별도 지정이 없을 때 dir="auto"로 가정하라는 공익 안내를 하고 싶음

    • 사용자 입력 폼 컨트롤은 일종의 별도 문서라서 그 기본값이 더 합리적일 수 있지만, 모든 요소의 기본값으로는 매우 나쁨
      사용자가 특정 언어로 입력한다는 걸 알고 있다면 그것도 최선의 기본값은 아닐 수 있음. 물론 틀리게 지정하는 것보다는 낫다

  • 약간 관련해서, 최근에 Vim에는 텍스트를 오른쪽에서 왼쪽으로 가게 만드는 :set rl이 있다는 걸 알게 됨
    원래대로 돌아오려면 :set norl을 쓰면 됨

    • 와, 꽤 멋지고 영어로도 그런 식으로 타이핑해보는 게 은근 재미있음. 생각보다 오래 해봤음
    • 오래된 Vim에는 아랍어 모드로 시작하는 vim -A도 있음. 어떻게 쓰는지는 모르겠고, 어떤 입력기를 쓰는 것 같음
    • :set td는 어떨까?
답변달기
GeekNews BeeBS 게시판 오픈! 자유로운 이야기와 소소한 일상을 함께 나눠보세요.