Добавляет доку про text-align-last (#5529)

* Добавляет доку про text-align-last * Применяет к демке фирменные стили * Исправляет формулировки * Добавляет бейджики * Форматирует код демо * Добавляет пустую строку * Ещё одна пустая строка * Увеличивает высоту демки * Подравнивает шрифты * Заодно захватывает размеры в white-space * быстрофикс ширины --------- Co-authored-by: Alena Batitskaia <[email protected]> Co-authored-by: Tatiana Fokina <[email protected]> Co-authored-by: Svetlana Korobtseva <[email protected]>
doka-guide · Nov 15, 2024 · 7018498 · 7018498
1 parent b48a996
commit 7018498
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 2 deletions.
diff --git a/css/text-align-last/demos/text-align-last/index.html b/css/text-align-last/demos/text-align-last/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>Пример значений — text-align-last — Дока</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:wght@400;500&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      block-size: 100%;
+    }
+
+    body {
+      min-block-size: 100%;
+      padding: 50px;
+      display: grid;
+      place-items: center;
+      background-color: #18191c;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+      font-size: 16px;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+      font-size: calc(1em - 1px);
+    }
+
+    h1 {
+      font-size: 30px;
+      font-weight: 500;
+      text-align: right;
+    }
+
+    .option-container {
+      display: flex;
+      align-items: flex-end;
+      margin-block-start: 30px;
+    }
+
+    .option-title {
+      margin-inline-end: 50px;
+      font-size: 18px;
+      text-align: right;
+    }
+
+    h1,
+    .option-title {
+      inline-size: 270px;
+    }
+
+    .option {
+      inline-size: 340px;
+      padding: 35px 20px;
+      background-color: #2E9AFF;
+    }
+
+    mark {
+      background-color: #2E9AFF;
+    }
+
+    .left {
+      text-align-last: left;
+    }
+
+    .right {
+      text-align-last: right;
+    }
+
+    .center {
+      text-align-last: center;
+    }
+
+    .justify {
+      text-align-last: justify;
+    }
+
+    .start {
+      text-align-last: start;
+    }
+
+    .end {
+      text-align-last: end;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .option-container {
+        display: block;
+        overflow: scroll;
+      }
+
+      h1,
+      .option-title {
+        inline-size: 100%;
+      }
+
+      .option-title {
+        display: block;
+        margin-inline-end: 0;
+        margin-block-end: 10px;
+      }
+
+      .option {
+        inline-size: calc(100vw - 60px);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="parent">
+    <h1><code>text-align-last</code></h1>
+    <div class="option-container">
+      <span class="option-title"><code>left</code></span>
+      <p class="option left"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>right</code></span>
+      <p class="option right"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>center</code></span>
+      <p class="option center"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>justify</code></span>
+      <p class="option justify"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>start</code></span>
+      <p class="option start"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>end</code></span>
+      <p class="option end"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/css/text-align-last/index.md b/css/text-align-last/index.md
@@ -0,0 +1,36 @@
+---
+title: "`text-align-last`"
+description: "Как сделать финальный аккорд стильным? Управляем выравниванием последней строки."
+authors:
+  - mbelinskaya
+related:
+  - css/top-left-right-bottom
+  - css/text-indent
+  - css/text-justify
+tags:
+  - doka
+---
+
+## Кратко
+
+`text-align-last` управляет выравниванием последней строки в блоке. Также работает для строк, которые заканчиваются принудительным переносом строки (например, перед тегом [`<br>`](/html/br/)).
+
+Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута `lang` у тега [`<html>`](/html/html/)), либо значением свойства `direction` (`ltr` — слева направо, `rtl` — справа налево).
+
+## Как пишется
+
+- `auto` —  выравнивание, как и для остальных строк, кроме случая со значением `justify`, тогда строка будет выравниваться по тому краю, по которому принято в текущем языке (значение по умолчанию).
+- `start` — в ту же сторону, что и весь остальной текст.
+- `end` — в противоположную сторону от остального текста.
+- `left` — по левому краю.
+- `right` — по правому краю.
+- `center` — по центру.
+- `justify` — по ширине, чтобы заполнить всё пространство.
+
+<iframe title="Пример выравния строки каждым из способов" src="demos/text-align-last/" height="1000"></iframe>
+
+## Подсказки
+
+💡 Не влияет на выравнивание остальных строк в блоке. Для этого используйте свойство [`text-align`](/css/text-align/).
+
+💡 Задаёт выравнивание для всех последних строк в выбранном элементе. Например, если у вас есть контейнер `<div>` с пятью абзацами в нём, выравнивание будет применяться к последней строке каждого из абзацев. Чтобы выровнять только последнюю строку последнего абзаца, используйте [`:last-child`](/css/child/) или [`:last-of-type`](/css/nth-of-type/).
diff --git a/css/white-space/demos/every/index.html b/css/white-space/demos/every/index.html
@@ -37,7 +37,7 @@
     }
 
     h1 {
-      font-size: 26px;
+      font-size: 30px;
       font-weight: 500;
       text-align: right;
     }
@@ -50,11 +50,12 @@
 
     .option-title {
       margin-inline-end: 50px;
+      font-size: 18px;
       text-align: right;
     }
 
     h1, .option-title {
-      inline-size: 180px;
+      inline-size: 210px;
     }
 
     .option {

diff --git a/people/mbelinskaya/index.md b/people/mbelinskaya/index.md
@@ -0,0 +1,6 @@
+---
+name: 'Мария Белинская'
+url: https://github.com/MBelinskaya
+badges:
+  - first-contribution-small
+---