Skip to content

Добавляет доку про псевдокласс :dir #6023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DrakesBot12 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Добавляет доку про псевдокласс :dir #6023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions css/dir/demos/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>:dir() — Псевдокласс — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
min-height: 100vh; padding: 50px; display: flex; align-items: center; justify-content: center;
background-color: #18191C; color: #FFFFFF; font-family: "Roboto", sans-serif; font-size: 16px;
}
@media (max-width: 768px) { body { padding: 30px; } }

.container { width: 100%; max-width: 840px; }
h1 { margin-bottom: 17px; font-weight: 500; font-size: 1.625rem; }
p { margin: 7px 0; font-size: 1rem; line-height: 1.4; }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }

.card { background: #222328; border: 1px solid #34353B; border-radius: 10px; padding: 18px; }
.title { margin-bottom: 10px; font-weight: 500; }

blockquote { background: #1E2024; border-radius: 8px; padding: 12px 14px; }

/* Акцент в зависимости от направления */
blockquote:dir(ltr) { border-left: 3px solid #2E9AFF; padding-left: 14px; }
blockquote:dir(rtl) { border-right: 3px solid #2E9AFF; padding-right: 14px; text-align: right; }

.lang { opacity: 0.85; font-size: 14px; }
</style>
</head>
<body>
<div class="container">
<h1><code>:dir()</code></h1>
<p>Два блока с разными направлениями письма. Граница и отступ встают к «началу строки».</p>

<div class="grid">
<section class="card">
<div class="title">LTR (русский)</div>
<blockquote dir="ltr">
<p>Ничего на свете лучше нету, чем бродить друзьям по белу свету.</p>
<div class="lang">dir=ltr</div>
</blockquote>
</section>

<section class="card">
<div class="title">RTL (арабский)</div>
<blockquote dir="rtl">
<p>السَّلَامُ عَلَيْكُمْ — مثال على نص باللغة العربية.</p>
<div class="lang">dir=rtl</div>
</blockquote>
</section>
</div>
</div>
</body>
</html>


89 changes: 89 additions & 0 deletions css/dir/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<blockquote dir="ltr">
<p>Ничего на свете лучше нету, чем бродить друзьям по белу свету.</p>
<div class="lang">dir=ltr</div>
<!-- Направление слева направо -->
</blockquote>

<blockquote dir="rtl">
<p>السَّلَامُ عَلَيْكُمْ — مثال على نص باللغة العربية.</p>
<div class="lang">dir=rtl</div>
<!-- Направление справа налево -->
</blockquote>
```

```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;
}
```

<iframe title=":dir() — оформление для LTR и RTL" src="demos/basic/" height="460"></iframe>

## Как пишется

```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()` поможет точечно поправить выравнивание и декоративные элементы.
1 change: 1 addition & 0 deletions css/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ groups:
- lang
- root
- indeterminate
- dir
- name: 'Псевдоэлементы'
items:
- pseudoelements
Expand Down
Loading