Html надстрочный текст: Тег — Учебник HTML — schoolsw3.com

Leave a Comment / Html / By /

HTML/Элемент sup

Синтаксис

(X)HTML

<sup> ... </sup>

Описание

Элемент sup (от англ. «superscript» ‒ «надстрочный, верхний индекс») определяет вложенный в него текст как верхний индекс. Текст, вложенный в элемент sup имеет размер немного меньший, чем размер основного текста.

Примечание

Индекс по отношению к основному тексту на полкорпуса смещен вверх. Данный элемент может быть так же использован внутри элемента var для обозначения верхних индексов переменных.

Совет

С помощью подобного элемента в документе удобно создавать сноски (например, «текст[1]»), а так же в математических выражениях указывать степень числа/переменной (например, «52=25; X2=4») в формуле. Для вывода больших или сложных формул рекомендуется использовать язык математической разметки MathML, но если выражение/формула небольшая и может корректно отображаться без использования

MathML, то допускается использование в формуле элементов sub и sup.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0—
3.2Font style elements
4.019.2.3 Subscripts and superscripts: the SUB and SUP elements
DTD: Transitional Strict Frameset
5.04.5.16 The sub and sup elements
5. 14.5.21. The sub and sup elements
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент sup</title>
</head>
<body>
<h2>Пример использования элемента «sup»</h2>
<h3>Формула зависимости энергии от скорости света</h3>
<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup> — энергия равна массе, умноженной на квадрат скорости света в свободном пространстве. </p>
</body>
</html>

Элемент sup

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как пишется

Кратко

Скопировано

Тег <sup> позволяет выводить надстрочный текст, например, в математических уравнениях: c2 = a2 + b2.

Пример

Скопировано

Чаще всего <sup> используется для вывода степеней в математических формулах.

<p>  Теорема Пифагора — одна из  основополагающих теорем евклидовой  геометрии c<sup>2</sup> =  a<sup>2</sup> + b<sup>2</sup>.</p>
          
 <p>
  Теорема Пифагора — одна из
  основополагающих теорем евклидовой
  геометрии c<sup>2</sup> =
  a<sup>2</sup> + b<sup>2</sup>.
</p>
Открыть демо в новой вкладке

Как пишется

Скопировано

Помимо описанного выше примера, можно использовать тег <sup> внутри тега <var>.

<p>  Квадрат суммы может быть вычислен как сумма  квадратов слагаемых и их удвоенное произведение:  <var>(a + b)<sup>2</sup> = a<sup>2</sup> + 2*a*b + b<sup>2</sup></var></p>
          <p>
  Квадрат суммы может быть вычислен как сумма
  квадратов слагаемых и их удвоенное произведение:
  <var>(a + b)<sup>2</sup> = a<sup>2</sup> + 2*a*b + b<sup>2</sup></var>
</p>

 
var {  font-style: normal;}
          var {
  font-style: normal;
}
Открыть демо в новой вкладке

Теги <sup> можно вкладывать друг в друга, тогда на каждом шаге текст будет подниматься вверх, а его размер будет уменьшаться.

<p>  Первый уровень  <sup>второй уровень    <sup>третий уровень      <sup>четвёртый уровень</sup>    </sup>  </sup></p>
          <p>
  Первый уровень
  <sup>второй уровень
    <sup>третий уровень
      <sup>четвёртый уровень</sup>
    </sup>
  </sup>
</p>
Открыть демо в новой вкладке

Также <sup> можно комбинировать с тегом <sub> для построения сложных формул.

<p>  <var>    X    <sup>      2 × log<sub>3</sub>(Z<sup>2</sup>)    </sup>  </var></p>
          <p>
  <var>
    X
    <sup>
      2 × log<sub>3</sub>(Z<sup>2</sup>)
    </sup>
  </var>
</p>
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<sub>

ctrl + alt + ←

→

<del>

ctrl + alt + →

Краткое примечание о надстрочном и подстрочном тексте — Адриан Роселли

Обновлено
, первоначально опубликовано ; Один комментарий

Благодаря разговору на A11y Slack я протестировал настольные браузеры и программы чтения с экрана, чтобы увидеть, как они объявляют контент, помеченный как верхний и нижний индексы. Я запустил старую демонстрацию середины 2018 года для быстрого теста:

См. перо HTML Buddies: sub & sup от Adrian Roselli (@aardrian) на КодПене.

НВДА

В NVDA есть пользовательские настройки для включения объявления надстрочных и подстрочных индексов: Настройки → Настройки… → Форматирование документа → Шрифт: Надстрочные и нижние индексы .

Это работает плавно, если они не устанавливают CSS vertical-align: text-top

или vertical-align: baseline . Тогда их сверхъестественность или субнизкость не передается. Я сделал еще одну демонстрацию, чтобы подтвердить это:

См. перо Супер- и суб-сценарий Адриана Роселли (@aardrian) на КодПене.

Первоначально я думал, что это ошибка NVDA, но появился Джеймс Тэх и поставил меня на место (снова). Поэтому я исправил существующую ошибку Firefox, которая появилась на две недели раньше моей: 1787976: Атрибуты позиции текста неправильно отображались в элементах, заключенных в теги sub или sup.

Хорошая новость заключается в том, что NVDA дает пользователям возможность выбора.

VoiceOver

VoiceOver, независимо от браузера, также не поддерживает объявление нижнего или верхнего индекса текста. По крайней мере, не на слух.

В утилите VoiceOver есть настройка, позволяющая включить ее только для дисплеев Брайля. Вы можете добраться до него с помощью Ctrl + Option + F8 или, если (как я) это никогда не работает для вас, меню Apple → Системные настройки → Специальные возможности → VoiceOver → Открытие утилиты VoiceOver . В этом диалоговом окне Брайль → Статус: Показать расширенный стиль текста .

Это ничего не дает для объявления, но я решил протестировать его с эмулятором дисплея Брайля VoiceOver, используя компактный, но химически странный 14 6 C 2+ 8 .

Без этой настройки надтекст и подтекст отображаются вместе с обычным текстом. Если этот параметр включен, пустые ячейки Брайля следуют за подтекстом/надтекстом. Я не уверен, что эмулятор, встроенный в VoiceOver, правильно его отображает — я не знаю шрифта Брайля и не знаю, как это будет воспроизводиться на физическом дисплее Брайля.

Если в утилите VoiceOver перейти к Многословие → Текст: при изменении атрибутов текста и выборе «Произнести атрибуты» вы услышите, как VoiceOver объявляет верхний и нижний индексы вместе с гарнитурой и размером шрифта. Для всего. Что делает его нецелесообразным для регулярного использования.

При использовании Ctrl + Option + T для произнесения атрибутов по запросу ни верхний, ни нижний индекс не отображаются.

Несмотря на это, из-за отсутствия настройки, позволяющей пользователям слышать только текст надстрочного и подстрочного индексов, я зарегистрировал проблему: 245278: AX: VoiceOver не имеет настройки для объявления подстрочного/надстрочного индекса.

Как ни странно, мне пришлось зарегистрировать его в Safari 15, потому что Safari 16 не был вариантом, хотя он отсутствует уже почти неделю, а 16.1 предположительно уже в пути.

ЧЕЛЮСТИ

JAWS не имеет настроек. По крайней мере, ни один из тех, что я смог найти. Он полностью игнорировал верхний и нижний индексы текста. Я не знаю, была ли когда-то эта функция, как кто-то предложил, потому что я не запускаю более старые версии для тестирования. Несмотря на это, похоже, что сегодня его нет.

Поэтому эту проблему было немного проще зарегистрировать: 668 Показать верхний и нижний индексы текста.

Резюме

Заявлены три проблемы со сценариями super / sub , две из которых касаются программ чтения с экрана:

  • Firefox: 1787976: атрибуты позиции текста неправильно отображаются в элементах, заключенных в теги sub или sup
  • VoiceOver: 245278: AX: VoiceOver не имеет настроек для объявления в подстрочном/надстрочном индексе
  • JAWS: 668 Показать верхний и нижний индексы текста

Метки

специальные возможности, Firefox, html, JAWS, VoiceOver

Другие сообщения

Предыдущий пост: «Доступность на периферии» W3C CG — это наложение дымовой завесы

Более свежий пост: Overlays Underwhelm на ID24

Как добавить верхний индекс, нижний индекс и многое другое в заголовки WordPress

Если вы здесь, значит, вы хотите добавить зарегистрированный символ (®) или символ товарного знака (™) в заголовок вашего сообщения WordPress, страницы, или продукт, только чтобы обнаружить, что он не будет отображаться в виде надстрочного индекса, как вы хотите! Или, возможно, вы хотели добавить какой-либо другой символ, текст или число в качестве верхнего или нижнего индекса к своему заголовку WordPress, но он просто никогда не отображается правильно.

Не бойся! Мы здесь, чтобы помочь.

Секрет заключается в том, что вы можете добавлять элементы HTML в заголовок любой страницы WordPress, если вы являетесь администратором. Итак, давайте прыгать!

  1. Убедитесь, что вы вошли в систему как администратор (в противном случае ваш HTML будет удален)
  2. Перейдите к странице, публикации или продукту, над которым вы хотите работать, из бэкэнда
  3. Добавьте следующий код для надстрочного индекса: ®  и следующее для подпункта: ®  (замените ® символом или текстом по вашему выбору)
  4. Нажмите «Сохранить изменения», чтобы обновить

Красиво и просто! Элемент HTML «» просто заставляет текст отображаться как верхний индекс, а элемент вызывает нижний индекс.

Работа над этим заставила меня задуматься… Какие еще элементы можно добавить в заголовок WordPress? Наверняка должно быть больше!

Как оказалось, я считаю, что ВСЕ встроенные HTML-элементы будут работать, хотя большинство из них не будут особенно полезными. Итак, сделав еще один шаг вперед, вот еще несколько полезных HTML-элементов, которые вы можете добавить в свои заголовки WordPress.

Список полезных (более или менее) элементов HTML, которые вы можете добавить в свои заголовки WordPress


  1. Да, вы можете добавлять ссылки прямо в свои заголовки! Может быть, это второстепенный вариант использования?
  2. /
    Да, часть заголовка можно выделить жирным шрифтом! Конечно, это все равно может быть переопределено другими вашими настройками стиля. Обратите внимание, что поклонники Semantic Web обычно должны использовать вместо .

  3.
    Вы действительно можете ввести разрыв строки в свой заголовок! Опять же, не знаю, зачем вам это нужно, но вы можете!

  5. Это может быть очень полезно! Если вам нужно выделить часть вашего заголовка (что обычно включает в себя выделение его курсивом), этот элемент идеален.

  6. Вы  можете  добавлять изображения к своим заголовкам. Но опять же…  Зачем  ?

  7. Нет. Просто, нет.

  8. Полезно для добавления кавычек к заголовку. Может быть более семантическим, чем просто добавление кавычек вручную.