Дополняет доки <sub>, <sup> (#4706)

* Причёсывает демки `<sub>` * Дополняет текст `<sub>` * Причёсывает демки `<sup>` * Дополняет текст `<sup>` * Возвращает потерявшуюся й * Меняет высоту демок * Добавляет уточнения про доступность
doka-guide · Oct 9, 2023 · dbe5fe1 · dbe5fe1
1 parent 81cd959
commit dbe5fe1
Show file tree

Hide file tree

Showing 10 changed files with 360 additions and 152 deletions.
diff --git a/html/sub/demos/basic/index.html b/html/sub/demos/basic/index.html
@@ -6,35 +6,59 @@
   <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:wght@400;500&display=swap">
   <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     html {
-      height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      min-height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      min-height: 100vh;
+      padding: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      background-color: #18191c;
-      color: white;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
       font-family: "Roboto", sans-serif;
-      font-size: 24px;
     }
 
     p {
-      text-align: center;
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    .container {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    Вода имеет химическую формулу H<sub>2</sub>O.
-  </p>
+  <div class="container">
+    <p>
+      Вода имеет химическую формулу H<sub>2</sub>O.
+    </p>
+  </div>
 </body>
 </html>
diff --git a/html/sub/demos/nested/index.html b/html/sub/demos/nested/index.html
@@ -6,36 +6,58 @@
   <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:wght@400;500&display=swap">
   <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     html {
-      height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      min-height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      min-height: 100vh;
+      padding: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      background-color: #18191c;
-      color: white;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
       font-family: "Roboto", sans-serif;
-      font-size: 24px;
     }
 
     p {
-      text-align: center;
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    .container {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    Первый уровень<sub>второй уровень<sub>третий уровень<sub>четвёртый уровень</sub></sub></sub><br>
-    Текст на этой строке не будет налезать на предыдущую строку – браузер увеличит высоту предыдущей строки, чтобы этого не произошло.
-  </p>
+  <div class="container">
+    <p>Первый уровень<sub>второй уровень<sub>третий уровень<sub>четвёртый уровень</sub></sub></sub></p>
+    <p>Текст на этой строке не будет налезать на предыдущую строку – браузер увеличит высоту предыдущей строки, чтобы этого не произошло.</p>
+  </div>
 </body>
 </html>
diff --git a/html/sub/demos/sup/index.html b/html/sub/demos/sup/index.html
@@ -6,37 +6,64 @@
   <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:wght@400;500&display=swap">
   <style>
-    html, body {
-      height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
+      min-height: 100vh;
+      padding: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      background-color: #18191c;
-      color: white;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
       font-family: "Roboto", sans-serif;
     }
 
     p {
-      font-size: 30px;
-      text-align: center;
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    .container {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    <var>
-      X
-      <sup>
-        2 × log<sub>3</sub>(Z<sup>2</sup>)
-      </sup>
-    </var>
-  </p>
+  <div class="container">
+    <p>
+      <var>
+        X
+        <sup>
+          2 × log<sub>3</sub>(Z<sup>2</sup>)
+        </sup>
+      </var>
+    </p>
+  </div>
 </body>
 </html>
diff --git a/html/sub/demos/variables/index.html b/html/sub/demos/variables/index.html
@@ -6,40 +6,62 @@
   <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:wght@400;500&display=swap">
   <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     html {
-      height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      min-height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      min-height: 100vh;
+      padding: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      background-color: #18191c;
-      color: white;
-      font-family: "Roboto Mono", sans-serif;
-      font-size: 24px;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
+      font-family: "Roboto", sans-serif;
     }
 
-    var {
-      font-style: normal;
+    p {
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
     }
 
-    p {
-      text-align: center;
+    .container {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    Сумма массива может быть вычислена последовательным сложением всех его элементов:<br>
-    sum := <var>X<sub>1</sub></var> + <var>X<sub>2</sub></var> + ... + <var>X<sub>N</sub></var>
-  </p>
+  <div class="container">
+    <p>
+      Сумма массива может быть вычислена последовательным сложением всех его элементов:
+    </p>
+    <p>
+      sum := <var>X<sub>1</sub></var> + <var>X<sub>2</sub></var> + … + <var>X<sub>N</sub></var>
+    </p>
+  </div>
 </body>
 </html>
diff --git a/html/sub/index.md b/html/sub/index.md
@@ -3,13 +3,18 @@ title: "`<sub>`"
 description: "Выводит подстрочный текст."
 authors:
   - xpleesid
+contributors:
+  - tatianafokina
 keywords:
   - подстрочный
   - индекс
+  - семантика
+  - screen reader
+  - ридер
 related:
-  - html/var
+  - a11y/role-subscript
   - css/tag-selector
-  - css/font-size
+  - html/var
 tags:
   - doka
 ---
@@ -30,7 +35,7 @@ tags:
 </p>
 ```
 
-<iframe title="Пример с формулой воды" src="demos/basic/" height="100"></iframe>
+<iframe title="Пример с формулой воды" src="demos/basic/" height="300"></iframe>
 
 ## Как пишется
 
@@ -40,9 +45,11 @@ tags:
 <p>
   Сумма массива может быть
   вычислена последовательным
-  сложением всех его элементов:<br>
+  сложением всех его элементов:
+</p>
+<p>
   sum := <var>X<sub>1</sub></var> +
-  <var>X<sub>2</sub></var> + ... +
+  <var>X<sub>2</sub></var> + … +
   <var>X<sub>N</sub></var>
 </p>
 ```
@@ -53,7 +60,7 @@ var {
 }
 ```
 
-<iframe title="Пример с математической формулой" src="demos/variables/" height="180"></iframe>
+<iframe title="Пример с математической формулой" src="demos/variables/" height="400"></iframe>
 
 Теги `<sub>` можно вкладывать друг в друга, тогда на каждом шаге текст будет спускаться ниже, а его размер будет уменьшаться.
 
@@ -68,7 +75,7 @@ var {
 </p>
 ```
 
-<iframe title="Пример с математической формулой" src="demos/nested/" height="120"></iframe>
+<iframe title="Пример с математической формулой" src="demos/nested/" height="480"></iframe>
 
 Также `<sub>` можно комбинировать с тегом [`<sup>`](/html/sup/) для построения сложных формул.
 
@@ -83,4 +90,8 @@ var {
 </p>
 ```
 
-<iframe title="Пример с тегом sup" src="demos/sup/" height="120"></iframe>
+<iframe title="Пример с тегом sup" src="demos/sup/" height="300"></iframe>
+
+### Доступность
+
+У `<sub>` есть встроенная роль [`subscript`](/a11y/role-subscript/). [Скринридеры](/a11y/screenreaders/) пока не сообщают об этой роли и не выделяют содержимое тега интонацией, но это добавляет семантический вес и приносит потенциальную пользу для доступности.