Html текст надстрочный: Тег — верхний индекс (надстрочный текст)

Есть много способов сделать это с помощью CSS, и у каждого есть свои плюсы и минусы. Один из способов — использовать относительное позиционирование. Быстрый пример может работать так:

 
  3
  4

 

И CSS для этого:

 span.fraction { }
/* Или дочерний селектор (>), если вам не нужен IE6 */
span.fraction span.numerator {
  должность: родственница;
  верх:-0,5см;
}
span.fraction span.знаменатель {
  должность: родственница;
  верх: 0,5 см;
  слева:-0.5em; /* Это зависит от шрифта... */
}
 

Этот конкретный пример будет работать лучше, если вы используете моноширинный шрифт.

7

Использовать стиль таблицы CSS (кроме IE8 и ниже). HTML:

 <диапазон>
  вверх
  подраздел

 

CSS:

 span.over-under {
  положение: родственник;
  верх: 1эм;
  отображение: встроенный блок;
}
span.over-under > .over {
  отображение: таблица-строка;
}
span.over-under > .under {
  отображение: таблица-строка;
}
 

Fiddle: https://jsfiddle.net/FredLoney/Loxxv769/4/

Помимо того, что это решение проще, чем настройка относительного положения, это решение позволяет избежать искажений макета, возникающих из-за этих альтернатив. См., например, https://jsfiddle.net/FredLoney/da89nyk2/1/.

Ну, вы не можете сделать это с помощью простого ванильного HTML. Как уже упоминалось, используйте CSS. Но вам также понадобится позиционирование!

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

16 сентября 2022 г.

Благодаря разговору на 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, используя компактный, но химически странный ¹⁴ ₆ C ²⁺ ₈ .

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

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

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