diff --git a/css/dir/demos/basic/index.html b/css/dir/demos/basic/index.html new file mode 100644 index 0000000000..6ff3f29fee --- /dev/null +++ b/css/dir/demos/basic/index.html @@ -0,0 +1,64 @@ + + + + :dir() — Псевдокласс — Дока + + + + + + + + +
+

:dir()

+

Два блока с разными направлениями письма. Граница и отступ встают к «началу строки».

+ +
+
+
LTR (русский)
+
+

Ничего на свете лучше нету, чем бродить друзьям по белу свету.

+
dir=ltr
+
+
+ +
+
RTL (арабский)
+
+

السَّلَامُ عَلَيْكُمْ — مثال على نص باللغة العربية.

+
dir=rtl
+
+
+
+
+ + + + diff --git a/css/dir/index.md b/css/dir/index.md new file mode 100644 index 0000000000..ddb7049fc7 --- /dev/null +++ b/css/dir/index.md @@ -0,0 +1,89 @@ +--- +title: "`:dir()`" +description: "Функциональный псевдокласс, который совпадает с элементами по их направлению письма: слева направо (`ltr`) или справа налево (`rtl`)." +authors: + - drakesbot12 +keywords: + - dir + - direction + - rtl + - ltr + - направление письма +related: + - html/bdo + - css/direction + - css/any-link +tags: + - doka +--- + +## Кратко + +`:dir()` — псевдокласс, который совпадает с элементами в зависимости от их вычисленного направления письма: `:dir(ltr)` или `:dir(rtl)`. Направление может приходить от атрибута `dir`, от языка документа или быть наследовано. + +## Пример + +Сдвинем «акцент» цитаты к краю чтения: слева в LTR и справа в RTL. + + +```html +
+

Ничего на свете лучше нету, чем бродить друзьям по белу свету.

+
dir=ltr
+ +
+ +
+

السَّلَامُ عَلَيْكُمْ — مثال على نص باللغة العربية.

+
dir=rtl
+ +
+``` + +```css +blockquote { background: #1E2024; border-radius: 8px; padding: 12px 14px; } + +/* Акцент и отступ у начала строки для LTR */ +blockquote:dir(ltr) { + border-left: 3px solid #2E9AFF; + padding-left: 14px; +} + +/* Акцент и отступ у начала строки для RTL */ +blockquote:dir(rtl) { + border-right: 3px solid #2E9AFF; + padding-right: 14px; + text-align: right; +} +``` + + + +## Как пишется + +```css +/* К элементам с направлением слева направо */ +blockquote:dir(ltr) { + padding-left: 14px; + border-left: 3px solid #2E9AFF; +} + +/* К элементам с направлением справа налево */ +blockquote:dir(rtl) { + padding-right: 14px; + border-right: 3px solid #2E9AFF; + text-align: right; +} +``` + +## Как понять + +`:dir()` опирается на вычисленную направленность элемента (Unicode Bidi + `dir`), а не только на наличие атрибута. Поэтому `:dir(rtl)` сработает и на потомках узла с `dir="rtl"`, даже если у них нет собственного атрибута. + +Отличие от селектора атрибута `[dir="rtl"]`: атрибутный селектор совпадёт только с теми элементами, у которых явно задан `dir`. Псевдокласс `:dir()` учитывает наследование и правила языка. + +## Подсказки + +💡 Используйте `:dir()` для симметричных отступов/границ, чтобы избежать дублирования «лево/право» правил. +💡 Комбинируйте с логическими свойствами (`margin-inline-start`, `padding-inline-end`) — тогда часть правил можно вовсе не ветвить по направлению. +💡 При смешанных направлениях внутри блока (вставки на другом языке) `:dir()` поможет точечно поправить выравнивание и декоративные элементы. diff --git a/css/index.md b/css/index.md index 9692ed7f2a..91e5498d8b 100644 --- a/css/index.md +++ b/css/index.md @@ -55,6 +55,7 @@ groups: - lang - root - indeterminate + - dir - name: 'Псевдоэлементы' items: - pseudoelements