bdi 및 bdo 요소

유니코드 양방향 알고리즘은 일반적으로 방향이 섞인 텍스트를 잘 처리합니다. 하지만 사용자가 제공한 이름 때문에 주변 텍스트의 방향이 바뀌지 않도록 격리하거나 코드 블록에서 특정 방향을 강제하는 등 알고리즘을 재정의해야 할 때가 있습니다.

<bdi>(양방향 격리)는 콘텐츠를 별도의 bidi 문맥으로 처리합니다. <bdi> 내부 텍스트의 방향은 외부 텍스트 방향에 영향을 줄 수 없으며, 그 반대도 마찬가지입니다.

영어 이름과 아랍어 이름이 섞인 사용자 목록에서는 아랍어 이름이 주변 텍스트로 RTL 흐름을 "유출"시킬 위험이 있습니다. 각 이름을 <bdi>로 감싸면 이름을 격리할 수 있으므로 이름의 방향과 관계없이 레이아웃이 일관되게 유지됩니다.

<bdo dir="rtl">(양방향 재정의)는 콘텐츠에 특정 방향을 강제하여 자연스러운 bidi 해석을 재정의합니다. 자연스럽지 않은 방향으로 텍스트를 표시하고 싶을 때 사용합니다. 예를 들어 RTL 페이지 안에서 코드 조각을 LTR로 렌더링할 때 사용할 수 있습니다.

일반 요소의 dir 특성은 기본 방향을 설정하지만 내부에는 bidi 알고리즘이 계속 적용됩니다. <bdo>는 콘텐츠에서 bidi 알고리즘을 끄므로 스크립트와 관계없이 모든 문자가 지정된 방향으로만 흐릅니다.

사용자가 생성한 텍스트를 주변 인터페이스에 삽입할 때마다 사용하십시오. 채팅 헤더의 이름, 댓글의 사용자 이름, 피드 항목의 제목 등이 해당합니다. 격리하면 사용자가 입력한 내용과 관계없이 주변 인터페이스 레이아웃이 영향을 받지 않습니다.

드뭅니다. 정당한 주요 용도는 양방향 텍스트를 가르칠 때(문자열을 뒤집으면 어떻게 보이는지 보여 줄 때)나, 자연스러운 양방향 텍스트 해석으로 시각적 순서가 잘못되는 잘못된 태그의 데이터를 바로잡을 때입니다.

방향을 알 수 없는 사용자 콘텐츠에는 이중으로 안전하게 <bdi dir="auto">를 함께 사용하십시오. 자동 감지는 콘텐츠에서 기본 방향을 선택하고, bdi는 해당 방향이 주변 텍스트로 새어 나가지 않도록 막습니다.

bdi와 bdo는 모든 최신 브라우저에서 지원됩니다. 두 요소는 HTML5의 일부이며 수년 동안 안정적으로 제공되어 왔습니다. IE의 이전 버전에는 bdi가 없지만 해당 버전들은 사실상 더 이상 사용되지 않으므로, 최신 사이트에서는 bdi를 자유롭게 사용할 수 있습니다.

스크린 리더는 양방향 텍스트 격리를 따릅니다. <bdi> 안의 텍스트는 lang이 설정되어 있으면 고유한 언어 음성으로 읽히며, 주변 맥락의 영향이 안으로 스며들지 않습니다. 또한 bdi는 텍스트 음성 변환기가 격리된 구문 주변에 적절한 쉼을 생성하도록 도와줍니다.

자리 표시자가 있는 템플릿("Welcome, {name}")에서는 자리 표시자를 <bdi>로 감싸야 합니다: Welcome, <bdi>{name}</bdi>. 사용자 이름이 영어, 아랍어 또는 여러 언어의 혼합으로 이루어져도 인사말의 나머지 부분을 방해하지 않고 올바르게 표시됩니다.

와 의 실질적인 차이는 무엇입니까?

bdi는 한 구역의 텍스트 방향이 주변에 영향을 주지 않도록 격리합니다. 템플릿의 이름처럼 삽입되는 사용자 콘텐츠에 사용하십시오. bdo는 양방향 텍스트 처리를 재정의하여 특정 방향을 강제하며, 교육 예제 외에는 거의 필요하지 않습니다. 방향을 알 수 없는 사용자가 제공한 텍스트를 안전하게 처리하려면 bdi를 dir="auto"와 함께 사용하십시오.