doka-guide · DrakesBot12 · Aug 3, 2025 · Aug 4, 2025 · Aug 9, 2025 · Aug 13, 2025
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Выравнивание аннотаций ruby-align — ruby-align — Дока</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@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;
+      font-size: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    ruby {
+      text-align: center;
+      ruby-align: center;
+    }
+
+    rt {
+      color: #FF8630;
+    }
+
+    .container {
+      display: grid;
+      width: 100%;
+      grid-template-columns: repeat(3, 1fr);
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <ruby>
+      風林
+      <rp> (</rp><rt>Ветер и лес</rt><rp>) </rp>
+    </ruby>
+    <ruby>
+      火山
+      <rp> (</rp><rt>Огонь и гора</rt><rp>) </rp>
+    </ruby>
+    <ruby>
+      雨月
+      <rp> (</rp><rt>Дождь и луна</rt><rp>) </rp>
+    </ruby>
+  </div>
+</body>
+</html>
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Интерактивная демка по ruby-align — ruby-align — Дока</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@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;
+      font-size: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    ruby {
+      text-align: center;
+      ruby-align: center;
+    }
+
+    rt {
+      margin-bottom: .5rem;
+      color: #FF8630;
+    }
+
+    .container {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    select {
+      padding: 0.4em 0.6em;
+      border-radius: 4px;
+      font-size: 1rem;
+    }
+
+    .selector-container {
+      display: flex;
+      align-items: center;
+      flex-direction: column-reverse;
+    }
+
+    #ruby-1 {
+      ruby-align: start;
+    }
+
+    #ruby-3 {
+      ruby-align: space-between;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="selector-container">
+      <div class="selector">
+        <label>
+          <select data-target="ruby-1">
+            <option value="start" selected>start</option>
+            <option value="center">center</option>
+            <option value="space-between">space-between</option>
+            <option value="space-around">space-around</option>
+          </select>
+        </label>
+      </div>
+      <ruby id="ruby-1">
+        山川
+        <rp> (</rp><rt>Горы и реки</rt><rp>) </rp>
+      </ruby>
+    </div>
+    <div class="selector-container">
+      <div class="selector">
+        <label>
+          <select data-target="ruby-2">
+            <option value="start">start</option>
+            <option value="center" selected>center</option>
+            <option value="space-between">space-between</option>
+            <option value="space-around">space-around</option>
+          </select>
+        </label>
+      </div>
+      <ruby id="ruby-2">
+        花鳥
+        <rp> (</rp><rt>Цветы и птицы</rt><rp>) </rp>
+      </ruby>
+    </div>
+    <div class="selector-container">
+      <div class="selector">
+        <label>
+          <select data-target="ruby-3">
+            <option value="start">start</option>
+            <option value="center">center</option>
+            <option value="space-between" selected>space-between</option>
+            <option value="space-around">space-around</option>
+          </select>
+        </label>
+      </div>
+      <ruby id="ruby-3">
+        日月
+        <rp> (</rp><rt>Солнце и луна</rt><rp>) </rp>
+      </ruby>
+    </div>
+  </div>
+  <script>
+    document.querySelectorAll('select').forEach(select => {
+      select.addEventListener('change', (e) => {
+        const rubyId = e.target.dataset.target;
+        const value = e.target.value;
+        document.getElementById(rubyId).style.rubyAlign = value;
+      });
+    });
+  </script>
+</body>
+</html>
@@ -0,0 +1,80 @@
+---
+title: "`ruby-align`"
+description: "Выравниваем аннотаций относительно базового текста с помощью нативного CSS!"
+baseline:
+  - group: ruby-align
+    features:
+      - css.properties.ruby-align
+      - css.properties.ruby-align.center
+      - css.properties.ruby-align.space-around
+      - css.properties.ruby-align.space-between
+      - css.properties.ruby-align.start
+authors:
+  - drakesbot12
+keywords:
+  - руби
+  - ruby
+  - выравнивание
+  - японский
+related:
+  - html/ruby
+  - css/ruby-position
+  - css/writing-mode
+tags:
+  - doka
+---
+
+## Кратко
+
+Свойство `ruby-align` определяет, как аннотации (руби-текст) выравниваются относительно базового текста в элементе [`<ruby>`](/html/ruby/). Это полезно при работе с восточноазиатскими языками, особенно японским.
+
+## Пример
+
+```html
+<ruby>
+  風林
+  <rp> (</rp><rt>Ветер и лес</rt><rp>) </rp>
+</ruby>
+<ruby>
+  火山
+  <rp> (</rp><rt>Огонь и гора</rt><rp>) </rp>
+</ruby>
+<ruby>
+  雨月
+  <rp> (</rp><rt>Дождь и луна</rt><rp>) </rp>
+</ruby>
+```
+
+```css
+ruby {
+  ruby-align: center;
+}
+```
+
+<iframe title="Выравнивание аннотаций ruby-align" src="demos/basic/" height="200"></iframe>
+
+## Как пишется
+
+```css
+.element {
+  ruby-align: start | center | space-between | space-around;
+}
+```
+
+- `start` — аннотация выравнивается по началу текста (значение по умолчанию).
+- `center` — аннотация выравнивается по центру символов базового текста.
+- `space-between` — аннотации распределяются с равными промежутками между символами основного текста.
+- `space-around` — аннотации распределяются с равными промежутками вокруг символов.
+
+Свойство работает только внутри элементов с `display: ruby` и аннотациями `<rt>`.
+
+## Как понять
+
+Когда вы используете аннотации над или под иероглифами (например, японскими), важно контролировать, как они соотносятся с основным текстом. Это особенно критично при сложных фразах или вертикальном письме. `ruby-align` позволяет точно управлять этим выравниванием.
+
+<iframe title="Интерактивная демка по ruby-align" src="demos/practis/" height="250"></iframe>
+
+## Подсказки
+
+💡 Свойство `ruby-align` применяется только к родительскому элементу [`<ruby>`](/html/ruby/).
+💡 Чтобы аннотации были видны, используйте элементы [`<ruby>`](/html/ruby/) и `<rt>`, а также корректный HTML-структурный контент.
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример работы ruby-overhang — ruby-overhang — Дока</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@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;
+      font-size: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    ruby {
+      text-align: center;
+      ruby-align: center;
+    }
+
+    rt {
+      color: #FF8630;
+    }
+
+    .container {
+      display: grid;
+      width: 100%;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .auto {
+      ruby-overhang: auto;
+    }
+
+    .none {
+      ruby-overhang: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <ruby class="auto">
+      表
+      <rp> (</rp>
+      <rt>поверхность</rt>
+      <rp>) </rp>
+    </ruby>
+    <ruby class="none">
+      現
+      <rp> (</rp>
+      <rt>проявление</rt>
+      <rp>) </rp>
+    </ruby>
+  </div>
+</body>
+</html>