Математика, физика, химия… проблема верхнего и нижнего индекса.

03.02.2017. Павел Китьян.

Сплошь и рядом на сайтах встречаются вот такие химические формулы: H2O, CO2. Или в тренажёре, решая задачку по математике, Вы видите ответ: 10 м2.

Это ужасно! Но почему так происходит?

Дело в том, что для вывода текста в нижнем или верхнем индексе в HTML следует использовать специальные теги. Тем, кто немного знаком с этим языком разметки, сразу вспомнятся <sub> и <sup>. Действительно, чтобы получить при отображении H2O нужно в HTML иметь H<sub>2</sub>O, а для 10 м2 соответственно 10 м<sup>2</sup>.

Довольно часто интерфейсы управления сайтами (CMS) и вообще интерфейсы онлайн-редакторов снабжены дружественными кнопками, что делает эти редакторы похожими на более привычные текстовые редакторы для ПК. При этом Вы просто выделяете текст, щелкаете кнопку верхнего или нижнего индекса и, что называется, результат налицо. И никаких тегов знать не надо.

Но так бывает далеко не всегда. Более того, часто HTML-разметка вообще запрещена, потому что любой разработчик знает — вводимое пользователем нужно проверять и фильтровать, потому что один пользователь может навредить другим с помощью некоторых специальных тегов.

И вот тогда уже вопрос становится серьёзным. Получается, что Вы, продвинутый пользователь, готовый даже вручную ввести теги в текстовое поле редактора, чтобы правильно отобразить формулу, не имеете такой возможности! Что же делать?

Вот тут-то на помощь и приходит Unicode. В нём есть наборы символов, которые сразу (уже в шрифте) помещены в нижний или верхний индекс! Конечно, помощь лишь частичная, потому что к таким символам в Unicode относятся в основном цифры, некоторые греческие и другие символы. И уж точно не кириллица. А ведь довольно часто приходится в индексе писать и буквы. Вспомните, сколько всяких Fт.в. и и прочих F встречается в задачках по физике!

Кроме того, справедливости ради следует отметить, что визуализация индексов двумя способами может различаться: H2O и H₂O и H₂O. Во втором и третьем случаях (без HTML-тегов) символ в индексе может не опускаться ниже строки в зависимости от используемого шрифта.

Но, хотя бы так!

Поэтому порекомендую Вам следующие ресурсы:

  • https://unicode-table.com/ru/ — справочник по Unicode. Прямо из него можно копировать символы. Я, например, часто копирую символы греческого алфавита.
  • http://shapecatcher.com/ — распознавание рукописного ввода символа. Пригодится, если Вы знаете, как символ пишется, но забыли его название и не можете его найти.
  • https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts — собственно те самые индексы, о которых шла речь в статье.

P.S. Мы, в свою очередь, довольно скоро планируем ввести в конструкторах еТреников поддержку HTML и удобные кнопки для индексов, пж, курсива и прочего. Но пока HTML под запретом. С другой стороны, вот в этом тренажёре индексы формул написаны именно символами в нижнем индексе, а не с помощью тега <sub>.