Nano Hash - криптовалюты, майнинг, программирование

как mathjax/katex отображают сложные формулы в Интернете?

Такие библиотеки, как mathjax и katex, могут отображать сложные формулы в Интернете без каких-либо плагинов. Есть информация как это реализовать?

Судя по моему ограниченному пониманию существующих шрифтов, формы шрифтов по существу фиксированы. Например, я могу увеличить или уменьшить размер буквы «А», сделать ее курсивом или полужирным, но нет механизма произвольного изменения ее формы (для данного шрифта).

С другой стороны, такие библиотеки, как mathjax/katex, похоже, делают то, что невозможно для стандартных шрифтов. Например, возьмем знак квадратного корня. Под знаком квадратного корня может быть одна функция, либо под ней может быть сколь угодно длинное и сложное выражение. Символ квадратного корня изменяется соответствующим образом. Как это возможно?

Одна возможность состоит в том, что эти математические «шрифты» не являются шрифтами в обычном смысле. Это просто svg-линии и кривые, что касается html. Однако, похоже, это не так, поскольку я могу выбирать (части) выражения так же, как я мог бы выбрать несколько слов в предложении.

Я спрашиваю об этом, потому что некоторые человеческие языки, такие как арабский/персидский/урду, не очень хорошо отображаются на большинстве веб-страниц, и причины, по-видимому, в том, что отдельные символы (или части символов) меняются в зависимости от того, что происходит или следует за символом. . Другими словами, этим языкам нужен контекстно-зависимый алгоритм, что, похоже, не подходит для большинства механизмов рендеринга текста.

Любопытно узнать, как отображаются математические формулы, чтобы я мог понять, как использовать эту технологию для отображения урду (в частности, насталик).

svg html mathjax katex urdu
10.04.2015

Ответы:


1

Вы можете убедиться в этом сами, если загрузите страницу, содержащую содержимое MathJax, и изучите исходный HTML-код отображаемых элементов.

Это некрасиво.

Это код HTML, сгенерированный MathJax для выражения $\sqrt{x^2 + y^2}$ (с добавленными мной разрывами строк):

<div id="wmd-preview" class="wmd-preview"><p><span class="MathJax_Preview" style="color:
inherit;"></span><span class="MathJax" id="MathJax-Element-41-Frame"><nobr><span
class="math" id="MathJax-Span-314" role="math" style="width: 4.836em; display:
inline-block;"><span style="display: inline-block; position: relative; width: 4.003em;
height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(2.947em
1000.003em 4.503em -999.997em); top: -3.997em; left: 0.003em;"><span class="mrow"
id="MathJax-Span-315"><span class="msqrt" id="MathJax-Span-316"><span style="display:
inline-block; position: relative; width: 4.003em; height: 0px;"><span style="position:
absolute; clip: rect(3.058em 1000.003em 4.392em -999.997em); top: -3.997em; left:
0.947em;"><span class="mrow" id="MathJax-Span-317"><span class="msubsup"
id="MathJax-Span-318"><span style="display: inline-block; position: relative; width:
0.947em; height: 0px;"><span style="position: absolute; clip: rect(3.392em 1000.003em
4.169em -999.997em); top: -3.997em; left: 0.003em;"><span class="mi"
id="MathJax-Span-319" style="font-family: STIXGeneral-Italic;">x<span style="display:
inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span
style="display: inline-block; width: 0px; height: 4.003em;"></span></span><span
style="position: absolute; top: -4.275em; left: 0.503em;"><span class="mn"
id="MathJax-Span-320" style="font-size: 70.7%; font-family:
STIXGeneral-Regular;">2</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span></span></span><span class="mo" id="MathJax-Span-321"
style="font-family: STIXGeneral-Regular; padding-left: 0.281em;">+</span><span
class="msubsup" id="MathJax-Span-322" style="padding-left: 0.281em;"><span
style="display: inline-block; position: relative; width: 0.892em; height: 0px;"><span
style="position: absolute; clip: rect(3.392em 1000.003em 4.392em -999.997em); top:
-3.997em; left: 0.003em;"><span class="mi" id="MathJax-Span-323" style="font-family:
STIXGeneral-Italic;">y</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span><span style="position: absolute; top: -4.275em; left:
0.447em;"><span class="mn" id="MathJax-Span-324" style="font-size: 70.7%; font-family:
STIXGeneral-Regular;">2</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span></span></span></span><span style="display: inline-block; width:
0px; height: 4.003em;"></span></span><span style="position: absolute; clip: rect(3.003em
1000.003em 3.392em -999.997em); top: -4.053em; left: 0.947em;"><span style="display:
inline-block; position: relative; width: 3.058em; height: 0px;"><span style="position:
absolute; font-family: STIXGeneral-Regular; top: -3.997em; left: 0.003em;">‾<span
style="display: inline-block; width: 0px; height: 4.003em;"></span></span><span
style="position: absolute; font-family: STIXGeneral-Regular; top: -3.997em; left:
2.558em;">‾<span style="display: inline-block; width: 0px; height:
4.003em;"></span></span><span style="font-family: STIXGeneral-Regular; position:
absolute; top: -3.997em; left: 0.392em;">‾<span style="display: inline-block; width:
0px; height: 4.003em;"></span></span><span style="font-family: STIXGeneral-Regular;
position: absolute; top: -3.997em; left: 0.836em;">‾<span style="display: inline-block;
width: 0px; height: 4.003em;"></span></span><span style="font-family:
STIXGeneral-Regular; position: absolute; top: -3.997em; left: 1.281em;">‾<span
style="display: inline-block; width: 0px; height: 4.003em;"></span></span><span
style="font-family: STIXGeneral-Regular; position: absolute; top: -3.997em; left:
1.725em;">‾<span style="display: inline-block; width: 0px; height:
4.003em;"></span></span><span style="font-family: STIXGeneral-Regular; position:
absolute; top: -3.997em; left: 2.114em;">‾<span style="display: inline-block; width:
0px; height: 4.003em;"></span></span></span><span style="display: inline-block; width:
0px; height: 4.003em;"></span></span><span style="position: absolute; clip: rect(2.836em
1000.003em 4.447em -999.997em); top: -3.942em; left: 0.003em;"><span style="font-family:
STIXGeneral-Regular;">√</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span></span></span></span><span style="display: inline-block; width:
0px; height: 4.003em;"></span></span></span><span style="border-left-width: 0.003em;
border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height:
1.603em; vertical-align: -0.463em;"></span></span></nobr></span><script type="math/tex"
id="MathJax-Element-41">\sqrt{x^2 + y^2}</script></p></div>

Если вы внимательно посмотрите, вы увидите несколько вхождений font-family: STIXGeneral-Regular — это веб-шрифт, MathJax использует для создания согласованного визуализированного вывода на всех платформах.

Если вы посмотрите еще внимательнее, то увидите несколько символов зачеркивания (‾), встроенных в гнездо из <span> элементов. Это то, что MathJax использует для рисования прямой линии поверх квадратного корня.

Хотя я бы не стал смотреть на это слишком пристально. Как я уже сказал, это некрасиво. Конечный результат выглядит нормально, хотя:

sqrt(x^2+y^2)

К счастью, современные веб-браузеры не должны иметь проблем с отображением контекстно-зависимых скриптов, если они правильно помечены (например, с использованием правильных lang и dir атрибуты).

10.04.2015
  • Спасибо за объяснение @squeamish ossifrage. Кажется, вы что-то знаете об этом, так что где-нибудь я могу прочитать больше вводного материала о том, как использовать веб-шрифты таким образом? 11.04.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..