블로그 장식용 문자 하나가 텍스트 레이아웃을 망가뜨린 이유

The footgun of right-to-left decorative characters

블로그에서 날짜와 카테고리 구분선으로 마니교 문장 부호 플뢰론(𐫱)을 사용하려던 개발자가, 이 문자가 HTML에서 예상치 못한 위치에 렌더링되는 문제를 발견한다. 원인은 이 문자가 Unicode Bidirectional Algorithm에서 강한 오른쪽에서 왼쪽(R) 유형으로 분류되어 주변의 약한 유형(숫자 등)을 재배열하기 때문이다. 해결책으로 <bdi> 태그나 CSS의 unicode-bidi 속성을 사용해 방향성을 격리하는 방법을 소개한다.