Skip to content

Commit 9b1419c

Browse files
s-dudkosolarrustskorobaeusTatianaFokina
authored
Добавляет доку про атрибут dir (#4837)
* Добавляет доку об атрибуте dir * Немного редактирует, форматирует * Стилизует поля * Твикает расстояния * Выравнивание по вертикали * Тире * Исправляет опечатку * Добавляет контрибьютера --------- Co-authored-by: Alena Batitskaia <batickaya.a@gmail.com> Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com> Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>
1 parent ede38b8 commit 9b1419c

File tree

4 files changed

+348
-0
lines changed

4 files changed

+348
-0
lines changed

‎html/dir/demos/dir-auto-input/index.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<title>Значение auto для элементов форм — Атрибут dir — Дока</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
10+
<style>
11+
*, *::before, *::after {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
html, body {
18+
height: 100%;
19+
}
20+
21+
body {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
padding: 50px 15px;
26+
font-family: "Roboto", sans-serif;
27+
font-size: 18px;
28+
color: #ffffff;
29+
accent-color: darkmagenta;
30+
background-color: #18191c;
31+
}
32+
33+
.wrapper {
34+
display: flex;
35+
flex-direction: column;
36+
37+
max-width: 360px;
38+
margin: 0 auto;
39+
}
40+
41+
label {
42+
display: flex;
43+
flex-direction: column;
44+
gap: 10px;
45+
font-size: 24px;
46+
font-weight: 500;
47+
}
48+
49+
label + label {
50+
margin-block-start: 25px;
51+
}
52+
53+
input,
54+
textarea {
55+
border: 1px solid #FFFFFF;
56+
border-radius: 6px;
57+
padding: 10px 15px;
58+
background-color: transparent;
59+
color: #FFFFFF;
60+
font-family: inherit;
61+
font-size: 18px;
62+
font-weight: 300;
63+
-webkit-appearance: none;
64+
appearance: none;
65+
}
66+
67+
input:focus {
68+
border-color: #FF8630;
69+
outline: none;
70+
}
71+
72+
p {
73+
margin-block-end: 25px;
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div class="wrapper">
79+
<p>Вы можете скопировать текст на арабском из примера выше и проверить как он будет отображаться в поле ввода</p>
80+
81+
<label>
82+
Введите текст
83+
<input dir="auto" type="text" value="ما اسمك؟">
84+
</label>
85+
86+
<label>
87+
Оставьте комментарий
88+
<textarea dir="auto" type="text" rows="6">
89+
ما اسمك؟
90+
Привет!
91+
ما اسمك؟
92+
</textarea>
93+
</label>
94+
</div>
95+
</body>
96+
</html>

‎html/dir/demos/dir-auto/index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<title>Значение auto — Атрибут dir — Дока</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
10+
<style>
11+
*, *::before, *::after {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
html, body {
18+
height: 100%;
19+
}
20+
21+
body {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
padding: 50px 15px;
26+
font-family: "Roboto", sans-serif;
27+
font-size: 24px;
28+
color: #ffffff;
29+
accent-color: darkmagenta;
30+
background-color: #18191c;
31+
}
32+
33+
.wrapper {
34+
display: flex;
35+
flex-direction: column;
36+
37+
max-width: 320px;
38+
margin: 0 auto;
39+
}
40+
41+
p {
42+
margin-block-start: 12px;
43+
margin-block-end: 12px;
44+
}
45+
46+
bdi {
47+
padding-inline-start: 10px;
48+
padding-inline-end: 10px;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<div class="wrapper">
54+
<p dir="auto">
55+
<bdi>1.</bdi>
56+
<span class="msg">Как сказать «Как тебя зовут» на арабском?</span>
57+
</p>
58+
<p dir="auto">
59+
<bdi>2.</bdi>
60+
<span class="msg"> ما اسمك؟</span>
61+
</p>
62+
<p dir="auto">
63+
<bdi>3.</bdi>
64+
<span class="msg">Спасибо.</span>
65+
</p>
66+
<p dir="auto">
67+
<bdi>4.</bdi>
68+
<span class="msg">Тут написано спасибо на арабском языке - «شكرًا».</span>
69+
</p>
70+
<p dir="auto">
71+
<bdi>5.</bdi>
72+
<span class="msg">Ты знаешь как пишется «Пожалуйста»?</span>
73+
</p>
74+
<p dir="auto">
75+
<bdi>6.</bdi>
76+
<span class="msg">«من فضلك», верно?</span>
77+
</p>
78+
</div>
79+
</body>
80+
</html>

‎html/dir/demos/dir-example/index.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<title>Пример использования — Атрибут dir — Дока</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
10+
<style>
11+
*, *::before, *::after {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
html, body {
18+
height: 100%;
19+
}
20+
21+
body {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
padding: 50px 15px;
26+
font-family: "Roboto", sans-serif;
27+
font-size: 24px;
28+
color: #ffffff;
29+
accent-color: darkmagenta;
30+
background-color: #18191c;
31+
}
32+
33+
.wrapper {
34+
display: flex;
35+
flex-direction: column;
36+
37+
max-width: 640px;
38+
margin: 0 auto;
39+
}
40+
41+
p {
42+
margin-block-start: 10px;
43+
margin-block-end: 10px;
44+
45+
padding-inline-end: 50px;
46+
line-height: 1;
47+
}
48+
49+
hr {
50+
margin: 25px 0;
51+
}
52+
53+
@media screen and (max-width: 767px) {
54+
.wrapper {
55+
max-width: 320px;
56+
}
57+
}
58+
</style>
59+
</head>
60+
<body>
61+
<div class="wrapper">
62+
<p dir="ltr">Пример русского текста с верно установленным направлением.</p>
63+
<p dir="rtl">Пример русского текста с неверно установленным направлением.</p>
64+
65+
<hr />
66+
67+
<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
68+
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
69+
</div>
70+
</body>
71+
</html>

‎html/dir/index.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: "Атрибут `dir`"
3+
description: "Указываем направление текста внутри всего документа или отдельного элемента."
4+
authors:
5+
- s-dudko
6+
contributors:
7+
- skorobaeus
8+
related:
9+
- html/global-attrs
10+
- html/bdi
11+
- html/bdo
12+
tags:
13+
- doka
14+
---
15+
16+
## Кратко
17+
18+
[Глобальный атрибут](/html/global-attrs/) `dir` устанавливает направление вывода текста внутри элемента. Действие атрибута наследуется от родительского элемента, но может быть переопределено. Может быть применён к любому HTML-элементу, но не для всех элементов имеет смысл.
19+
20+
## Пример
21+
22+
```html
23+
...
24+
<p dir="ltr">Пример русского текста с верно установленным направлением.</p>
25+
<p dir="rtl">Пример русского текста с неверно установленным направлением.</p>
26+
27+
<hr />
28+
29+
<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
30+
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
31+
...
32+
```
33+
34+
<iframe title="Примеры использования" src="demos/dir-example/" height="400"></iframe>
35+
36+
В примере рассмотрены различные варианты выравнивания текста — слева направо (`ltr`), справа налево (`rtl`) и автоматическое определение направления текста браузером.
37+
38+
## Как пишется
39+
40+
Атрибут `dir` принимает одно из следующих значений:
41+
42+
- `ltr` — текст будет написан слева направо. Такое направление текста используется, например, для русского или английского языков. Является значением по умолчанию;
43+
- `rtl` — текст будет написан справа налево. Актуально, например, для арабских языков;
44+
- `auto` — направление текста определяется браузером.
45+
46+
Алгоритм, используемый браузерами для определения направления текста при значении `auto`, можно представить следующим образом:
47+
48+
- браузер определяет, к какому типу языков (в плане направления написания текста) принадлежит первый символ абзаца;
49+
- устанавливается направление вывода текста исходя из норм языка, в котором используется данный символ.
50+
51+
## Подробнее
52+
53+
В HTML направление текста задаётся либо ближайшим родительским элементом, который использует атрибут `dir`, либо, при отсутствии такого атрибута, используется значение `ltr`.
54+
55+
При изменении значения атрибута на `rtl`, браузер автоматически изменит как направление текста, так и его выравнивание (текст будет выровнен по правому краю), в соответствии с тем как это принято в таких языках.
56+
57+
Чаще всего атрибут `dir` следует использовать для задания базового направления текста для всего документа. Чтобы это сделать необходимо применить атрибут к тегу [`<html>`](/html/html/).
58+
59+
```html
60+
<!DOCTYPE html>
61+
<html dir="rtl" lang="ar">
62+
<head>
63+
<meta charset="utf-8">
64+
</head>
65+
...
66+
</html>
67+
```
68+
69+
Объявляя общее для документа направление текста в теге `<html>`, не забудьте также объявить язык документа с помощью атрибута [`lang`](/html/global-attrs/#lang). Это поможет вспомогательным технологиям, например таким как [скринридер](/a11y/screenreaders/), верно взаимодействовать с контентом на странице. При этом, объявления языка не указывает направление текста. Всегда лучше объявлять направление текста явно с помощью атрибута `dir`.
70+
71+
Также атрибут `dir` может быть использован внутри отдельных блоков чтобы изменить направление текста только в заданном блоке. Такие блоки называются блоками двунаправленного текста.
72+
73+
```html
74+
<html dir="rtl" lang="ar">
75+
...
76+
<blockquote dir="ltr" lang="ru" cite="Мастер и Маргарита">
77+
Поймите, что язык может скрывать истину, а глаза – никогда!
78+
</blockquote>
79+
...
80+
</html
81+
```
82+
83+
## Значение `auto`
84+
85+
Атрибут `dir` со значением `auto` следует применять только в том случае, если заранее неизвестно направление текста, например, если данные на сайт поступаю из внешних источников.
86+
87+
При определении направления текста, в этом случае, браузер, при поиске первого строго типизированного символа, пропускает текст в элементе [`<bdi>`](/html/bdi/), а также текст в элементах [`<script>`](/html/script/), [`<style>`](/html/style/) и [`<textarea>`](/html/textarea/), в любом элементе с атрибутом `dir`.
88+
89+
<iframe title="Значение auto" src="demos/dir-auto/" height="530"></iframe>
90+
91+
Обратите внимание что этот используемый браузерами алгоритм не всегда надёжный. В примере последний абзац неверно интерпретируется браузером. Так как первый символ является арабским, то браузер выбрал направление текста справа налево. В результате, последняя строка будет выровнена по правому краю, а текст «верно?» находится слева от арабского текста, с вопросительным знаком в крайнем левом углу.
92+
93+
Также значение `auto` можно применять если данные вводятся пользователем в элементах формы, таких как [`<input>`](/html/input/) или [`<textarea>`](/html/textarea/).
94+
95+
<iframe title="Значение auto для элементов форм" src="demos/dir-auto-input/" height="530"></iframe>
96+
97+
В примере можно заменить, что браузер сам определяет направление текста в зависимости от первой введённой буквы. Для элемента `<textarea>`, направление текста в этом случае определяется отдельно для каждого абзаца. Абзацы `rtl` и `ltr` в этом случае также выравниваются по-разному.
98+
99+
## Подсказки
100+
101+
💡 Используйте [логические](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values) CSS-свойства для стилизации блоков, это сделает вёрстку предсказуемой вне зависимости от направления текста.

0 commit comments

Comments
 (0)