Добавляет доку про text-indent (doka-guide#660) (doka-guide#2667)

* Добавляет статью про `text-indent` * Пустая строка в конце * Update css/text-indent/index.md Co-authored-by: Alena Batitskaya <[email protected]> * Редактирует доку и добавляет демку * Добавляет пустую строку * Правит статью и демку * Добавляет пустую строку) * Добавляет картинку демки * Вносит мелкие правки - Подключает шрифт в демке - Меняет структуру - Добавляет description Co-authored-by: Alena Batitskaya <[email protected]> Co-authored-by: Alena Batitskaya <[email protected]>
nigsekor · Jan 25, 2022 · 109d4c1 · 109d4c1
1 parent 00fe26b
commit 109d4c1
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 3 deletions.
diff --git a/css/text-indent/demos/basic/index.html b/css/text-indent/demos/basic/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Варианты значений — text-indent — Дока</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&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap">
+  <style>
+    html {
+      height: 100%;
+    }
+
+    html {
+      display: grid;
+      place-items: center;
+    }
+
+    body {
+      background-color: #18191c;
+      color: white;
+      font-family: "Roboto", Arial, sans-serif;
+    }
+
+    code {
+        display: block;
+        font-family: "Roboto Mono", monospace;
+        margin-bottom: 5px;
+    }
+
+    .ex {
+        width: 600px;
+        margin-bottom: 30px;
+    }
+
+    .each-line {
+        text-indent: 3em each-line;
+    }
+
+    .hanging {
+        text-indent: 3em hanging;
+    }
+
+  </style>
+</head>
+<body>
+  <p><code>each-line</code></p>
+  <p class="ex each-line">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam eos, corporis vel error, dolores numquam nesciunt unde earum deleniti quidem expedita tempora magni repudiandae doloribus cumque recusandae! Doloribus, amet quis?
+  </p>
+  <p><code>hanging</code></p>
+  <p class="ex hanging">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consequuntur, nobis repellendus odio nisi, quaerat tempora praesentium ab incidunt porro impedit. Quod, eaque numquam? Sit cupiditate sunt dolorem optio at.
+  </p>
+</body>
+</html>
diff --git a/css/text-indent/images/1.png b/css/text-indent/images/1.png
diff --git a/css/text-indent/index.md b/css/text-indent/index.md
@@ -1,19 +1,56 @@
 ---
 title: "`text-indent`"
+description: "С помощью `text-indent` можно создать «красную строку» — добавить отступ для первой строки абзаца."
 authors:
-  - doka-dog
+  - ra1nbow1
 keywords:
   - отступ первой строки
   - отступ текста
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
 Свойство `text-indent` управляет отступом первой строки текста: либо вытягивает строку за пределы абзаца, либо утягивает её внутрь. Используется для выделения начала абзаца при плотном наборе без отступов между абзацами.
 
+Строка смещается по горизонтали относительно начала строки.
+
+## Пример
+
+Значение в пикселях:
+
+```css
+div {
+  text-indent: 20px;
+}
+```
+
+Процент рассчитывается от ширины блока:
+
+```css
+div {
+  text-indent: 15%;
+}
+```
+
+Значения ключевых слов:
+
+<iframe title="Варианты значений" src="demos/" height="375"></iframe>
+
+Пример корректно отображается только в Safari. Он выглядит следующим образом:
+
+![Пример text-indent](images/1.png)
+
 ## Как пишется
 
-Значение свойства можно задать в любых [единицах измерения](/css/numeric-types/) включая проценты. Во втором случае размер отступа будет зависеть от ширины блока, содержащего текст.
+### Ключевые слова
+
+Ключевые слова являются экспериментальными и официально не предусмотрены в спецификации CSS.
+
+- `hanging` — инвертирует отступы в строках. Добавляет отступ в каждой строке, кроме первой.
+- `each-line` — добавляет отступы в каждой строке после принудительного разрыва строки (с помощью [`<br>`](/html/br/)).
+
+### Единицы измерения
+
+Значение свойства можно задать в любых [единицах измерения](/css/numeric-types/) включая проценты. Во втором случае размер отступа будет зависеть от ширины блока, содержащего текст. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.
diff --git a/people/ra1nbow1/index.md b/people/ra1nbow1/index.md
@@ -0,0 +1,4 @@
+---
+name: 'Матвей Романов'
+url: https://twitter.com/romanov_web
+---