CSS의 양방향 수평 규칙

dir attribute in HTML 및 dir property in CSS은 텍스트의 방향과 수평 흐름을 설정하는 데 사용할 수 있습니다. 일부 언어는 LTR(Left-To-Right)로 작성되고 다른 언어는 RTL(Right-To-Left)로 작성됩니다. 따라서 이러한 수준의 제어 기능은 웹용 문서 및 인터페이스를 만드는 데 필수적입니다.

LTR 및 RTL 레이아웃을 모두 지원하는 인터페이스를 구축하는 것은 어려운 일입니다. Flexbox와 Grid는 확실히 작업을 더 쉽게 해주지만 모든 스타일링 요구 사항을 충족하지는 않습니다.

물리적 방향이나 측면을 지정하는 CSS 규칙이 많이 있습니다. 예를 들어 레이아웃 가로 요소에 CSS를 작성할 때 한 면에만 여백을 설정하고 첫 번째 또는 마지막 형제 요소에 여백을 0(같은 면)로 설정하는 것이 일반적입니다.

.element {
    margin-right: 1rem;
}

.element:last-child {
    margin-right: 0;
}

또는

.element:not(:last-child) {
    margin-right: 1rem;
}

위의 예에서 마지막 요소를 제외한 각 요소의 오른쪽에 여백을 추가하고 있습니다. 그렇게 쓰여 있습니다. 우리가 이것을 작성할 때 의미하는 바는 문서(또는 상위 요소)의 수평 흐름 방향으로 요소 뒤에 여백을 추가하는 것입니다.

스타일을 지정하는 일반적인 방법blockquote은 인용문의 한쪽에 테두리를 추가하는 것입니다. 우리가 인용문 앞에 오는 것으로 간주하는 면.

Bulma 님의 <blockquote> 스타일링입니다.

.content blockquote {
    background-color: #f5f5f5;
    border-left: 5px solid #dbdbdb;
    padding: 1.25em 1.5em;
}

그리고 CSS에서 측면/방향(왼쪽/오른쪽)을 지정하는 다른 많은 스타일 선택이 있지만 실제로 의미하는 것은 전/후입니다.

따라서 LTR 및 RTL 레이아웃을 모두 지원하는 인터페이스를 구축할 때 한 가지 옵션은 다음과 같은 CSS 규칙을 작성하는 것입니다.

.class {}

html[dir="rtl"] .class {}

또는 LTR 및 RTL 레이아웃에 대해 다른 스타일시트를 로드할 수도 있습니다. 그러나 두 옵션 모두 더 많은 CSS를 작성하거나 set up our tooling to generate the appropriate flipped styles 을 작성해야 합니다. 그리고 당신을 위한 tools that convert LTR to RTL styles도 있습니다.

대신 낮은 수준의 추상화로 작업하는 것이 좋지 않을까요? 왼쪽/오른쪽의 물리적 방향을 참조하는 대신 요소 앞/뒤의 측면을 대상으로 한다고 브라우저에 알릴 수 있다면 어떨까요? 하루가 끝나면 이것은 우리가 많은 시간을 의미하는 것입니다. 이 트윗이 생각납니다.






키스•제이•그랜트










CSS를 코딩할 때 *알려지지 않은* 콘텐츠를 가져와서 *알려지지 않은* 매체에 정리하는 추상적인 규칙을 작성합니다. 그 똥은 어렵습니다.


오후 13:26 - 2017년 3월 17일









CSS에는 논리적 속성이라는 것이 있습니다. 이제 실제로 의미하는 바를 브라우저에 알릴 수 있습니다. -left 및 -right 를 사용하는 대신 -inline-start 및 -inline-end 를 사용할 수 있습니다.

.element:not(:last-child) {
    margin-inline-end: 1rem;
}

마찬가지로 -top 및 -bottom 를 사용하는 대신 -block-start 및 -block-end 를 사용할 수 있습니다.

이는 LTR 및 RTL 레이아웃을 모두 대상으로 하는 하나의 규칙 세트를 작성할 수 있음을 의미합니다. 다음은 margin-inline-end 속성을 사용하는 예입니다.


border-inline-start 및 padding-inline-start 속성 사용:



Firefox는 또한 border-*-*-radius를 지원하므로 border-start-start-radius , border-end-start-radius 등으로 다른 모서리를 타겟팅할 수 있습니다.



모든 데모:



더 자세한 설명은 Rachel Andrew의 기사Understanding Logical Properties And Values를 참조하십시오. 이것은 RTL 인터페이스나 수평적 양방향 CSS 규칙에 관한 것이 아닙니다. Rachel의 기사는 논리적 차원도 다룹니다.

브라우저 지원

사용해도 되나요?:

Logical Properties

border-*-*-radius