CSS - RTL 요소

마크 업에서 LTR 방향은 다음과 같이이다 :CSS - RTL 요소

<html dir="rtl"> 
    <head> 
     <style> 
      p {direction: rtl;} 
      code{direction: ltr !important;} 
     </style> 
    </head> 
    <body> 
     <p>متن به زبان فارسی<code>some:code;</code>متن به زبان فارسی</p> 
    </body> 
</html> 

some word to reach quality of content, ah rules...

하지만 direction:ltr 속성이 작동되지 않고 작동 할 수있는 방법이 있습니까?

우리는 dir="rtl"을 html 태그에서 제거 할 수 없습니다. 또한 float:left 모든 것을 파괴하십시오!

코드 업데이트 :이http://jsfiddle.net/cC3FX/4/

출처

2014-01-13 newbie

HTML이 잘못되었습니다. ' '은 무엇입니까? 당신은 아마도''. – Vucko

그것은 약간의 실수 일뿐입니다. 원래 HTML 마크 업이 아니며 여전히 작동하지 않습니다. – newbie

작동하지 않는 부분을 설명해 주시겠습니까? 페르시아 문자가 어떻게 다른가요? 나는 뭔가를 놓치고 있습니다 ... –

을 확인 정보] 왼쪽에서 왼쪽 컨텍스트 인 <code>some:code;</code>은 ;some:code으로 표시됩니다 (즉, 세미콜론이 오른쪽이 아닌 왼쪽에 나타남). direction은 code 요소에서 ltr으로 설정됩니다. 우선 순위에 따라

세 가지 대안 :

1)이 포함 된 code 요소 (및 기타 요소 왼쪽에서 오른쪽으로 텍스트 오른쪽에서 왼쪽으로 환경)에 대한 HTML에서 dir 속성을 사용

를

<code dir=ltr>some:code;</code>

이렇게하면 code에 대한 CSS 규칙이 중복됩니다. 질문합니다 (!important 지정이가 필요하지 않습니다하지만) 같이 CSS 코드를 사용

2) CSS 규칙

code { unicode-bidi: embed }

)가에 임베딩 U + 202A LEFT-TO-RIGHT를 사용하여 추가 시작 및 U + 202C POP 방향 양식은 code 요소 내용의 끝에 붙입니다.

<code dir=ltr>&#202a;some:code;&#202c;</code>

이 문제는 유니 코드 양방향 규칙 때문에 발생합니다. 예제 <code>some:code;</code> (문자 그대로)을 고려하면 direction: ltr으로 설정하는 것만으로는 충분하지 않습니다. 오른쪽에서 왼쪽으로 전체적인 맥락에서, 방향 중립적 인 ";"문자는 내용을 둘러싸는 방향성을 따르므로 왼쪽에 배치됩니다.LTR 텍스트와 RTL 텍스트의 연결 지점에 있다는 의미에서, 그것은 자체 요소와 부모 요소에 의해 다른 방향으로 찢어지고 유니 코드 규칙은 부모가 승리한다고 말합니다.

해결 방법 1은 HTML5 CR, 절 10.3.5 Bidirectional text에 나와있는 것처럼 HTML dir 속성과 CSS direction 속성간에 차이가 있으므로이 문제를 해결합니다. 이 속성은 "양방향 임베딩"을 유발합니다. 즉, 요소 내용이 방향성의 새로운 중첩 수준에서 렌더링됩니다.

해결 방법 2는 CSS에서 unicode-bidi 속성을 사용하여 동일합니다. HTML5 CR은 says에 강조 표시됩니다. "작성자는 CSS가 아닌 텍스트 방향을 나타 내기 위해 dir 속성을 사용하는 것이 좋습니다. 그러면 CSS가없는 경우에도 문서가 올바르게 렌더링되기 때문입니다."

해결 방법 3은 캐릭터 레벨에서 똑같은 작업을 수행하는 또 다른 방법입니다. 대부분의 경우 처음부터 끝까지 LEFT-TO-RIGHT MARK 문자를 사용할 수도 있지만 여기에 사용 된 문자는 CSS 2.1이 unicode-bidi: embed에 해당하는 문자입니다. HTML 4.01에는 방향 제어 문자가 언급되어 있지만 다음과 같이 추가됩니다. "마크 업 방법은 문서 구조적 무결성을보다 잘 보장하고 간단한 텍스트 편집기로 양방향 HTML 텍스트를 편집 할 때 몇 가지 문제를 완화하지만 일부 소프트웨어는 [UNICODE] 문자. 두 가지 방법을 모두 사용하는 경우 마크 업 및 방향 포함 또는 오버라이드의 적절한 중첩을 보장하려면주의를 기울여야합니다. 그렇지 않으면 렌더링 결과가 정의되지 않습니다. "

출처

2014-01-13 14:55:57

감사합니다. 모든 브라우저에서'unicode-bidi : embed'가 작동합니까? – newbie

예, 실제로 말하기 (IE 5.5 이전의 브라우저는 생각할 필요가 없습니다). https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi를 참조하십시오. –

귀하의 코드가 잘 작동

는이 demo

HTML 코드

보일 페르시아어 작동하지 것

<p>some text <code>some:code;</code></p> 
some word to reach quality of content, ah rules...

CSS 코드

html,body{direction: rtl;} 
p {direction: rtl;} 
code{direction: ltr !important;}

출처

2014-01-13 12:16:20 Fox

서식 지정 제어 문자를 추가하여 양방향 (양방향) 문제를 해결할 수 있습니다.

&lrm; 왼쪽에서 오른쪽 마크를 추가 -과 같이 :

<p>متن فارسی<code>some:code;&lrm;</code>متن فارسی</p> /* added &lrm; char here */

FIDDLE

더 문제는 오른쪽에 해당 될 것으로 보인다 this microsoft article

출처

2014-01-13 12:19:59 Danield

@newbie - 페르시아어로 답변을 업데이트했습니다 – Danield

페르시아어 스크립트는 어떻게 문제가 있습니까? –

@MarcAudet - 사실, 나는 페르시아인을 위해 아무 것도 바뀌지 않았다. 내 솔루션은 동일하게 유지되었습니다. 나는 그의 persian 마크 업으로 대답을 업데이트했다. – Danield

CSS - RTL 요소

답변

관련 문제