Каков наилучший способ встраивания LaTeX в веб-страницу?
Я не спрашиваю о преобразовании документа LaTeX в HTML.
Я хотел бы иметь возможность использовать математические команды LaTeX в HTML-документе и правильно отображать их в браузере. Это может быть сделано на стороне сервера или клиента.
12 ответов
MediaWiki может сделать то, что вы ищете. Он использует Texvc ( http://en.wikipedia.org/wiki/Texvc), который "проверяет (AMS) математические выражения LaTeX и преобразует их в HTML, MathML или PNG-графику". Похоже, что вы ищете.
Прочтите статью Википедии о том, как они обрабатывают математические уравнения, здесь: http://en.wikipedia.org/wiki/Help:Formula. Они также имеют обширную ссылку на LaTeX и плюсы / минусы различных типов рендеринга (PNG / MathML / HTML).
MediaWiki использует подмножество разметки TeX, включая некоторые расширения из LaTeX и AMS-LaTeX, для математических формул. Он генерирует изображения PNG или простую разметку HTML, в зависимости от пользовательских настроек и сложности выражения. В будущем, поскольку все больше браузеров будут умнее, во многих случаях он сможет генерировать улучшенный HTML или даже MathML. (Информацию о текущей работе по добавлению поддержки MathML смотрите в Blahtex.)
Точнее, MediaWiki фильтрует разметку через Texvc, который, в свою очередь, передает TeX команды для фактического рендеринга. Таким образом, поддерживается только ограниченная часть полного языка TeX; подробности смотрите ниже....
Плюсы HTML
- Встроенные формулы HTML всегда корректно выравниваются с остальным текстом HTML.
- Фон формулы, размер шрифта и лицо соответствуют остальному содержимому HTML, а внешний вид соответствует настройкам CSS и браузера.
- Страницы, использующие HTML, будут загружаться быстрее.
Плюсы TeX
- TeX семантически превосходит HTML. В TeX "x" означает "математическая переменная x", тогда как в HTML "x" может означать что угодно. Информация была безвозвратно утеряна. Это имеет несколько преимуществ:
- TeX может быть преобразован в HTML, но не наоборот. Это означает, что на стороне сервера мы всегда можем преобразовать формулу, основываясь на ее сложности и расположении в тексте, пользовательских предпочтениях, типе браузера и т. Д. Поэтому, где это возможно, все преимущества HTML могут быть сохранены вместе с Преимущества TeX. Это правда, что текущая ситуация не идеальна, но это не хорошая причина, чтобы отбрасывать информацию / содержание. Это еще одна причина, чтобы помочь улучшить ситуацию.
- TeX может быть преобразован в MathML для браузеров, которые его поддерживают, тем самым сохраняя его семантику и позволяя отображать его как вектор.
- TeX был специально разработан для формул набора текста, поэтому ввод легче и естественнее, а вывод более эстетически приятен.
- При написании в TeX редакторам не нужно беспокоиться о поддержке браузера, так как сервер выводит их в изображение. С другой стороны, HTML-формулы могут оказаться несовместимыми с намерениями редактора (или вовсе не быть) некоторыми браузерами или более старыми версиями браузера.
Я предпочитаю MathJax решениям, которые выбирают рендеринг изображений (что вызывает проблемы с наложением).
MathJax - это движок рендеринга Javascript для математики с открытым исходным кодом. Он использует CSS и веб-шрифты вместо изображений или flash и может отображать LaTeX или MathML. Таким образом, у вас не будет проблем с масштабированием, и он совместим даже с программой чтения с экрана.
Однажды я разработал плагин jQuery, который фактически делает это: jsLaTeX
Вот самый простой пример того, как его можно использовать:
$(".latex").latex();
<div class="latex">
\int_{0}^{\pi}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =\frac{22}{7}-\pi
</div>
Приведенное выше сгенерирует следующее уравнение LaTeX на вашей странице:
http://img16.imageshack.us/img16/5462/gifwm.gif
Демо-страница плагина содержит больше примеров кода и демонстраций.
Только один (очень хороший) ответ на этот вопрос цитирует KaTeX , который, по моему опыту, является наиболее эффективным решением, быстро загружающимся и простым в реализации.
Вам нужно добавить один
<link>тег (для таблицы стилей) и два
<script>с вашим
<head>. Затем используйте
\( \)в качестве разделителей для встроенной математики и
\[ \]в качестве разделителей для отображаемой математики в пределах
<body>.
Вот минимальный файл html5 с реализацией:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Katex</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>
<body>
<p>Math can be inline like \(2^{2x}=4\), or displayed like:</p>
\[2^{3x}=8\]
</body>
</html>
Я сам начинаю изучать это, и кажется, что все изменилось. Я сталкивался с этим демо сравнения KaTeX и MathJax.
Короче говоря (на момент написания статьи):
- Фракции внутри матрицы сталкиваются друг с другом в KaTeX, но не в MathJax (см. "Перекрестное произведение").
- Внутри квадратного (или n-го) корневого символа показатели степени и вложенные квадратные корни, кажется, сталкиваются с горизонтальной верхней линией (см. "Повторяющиеся дроби" и "n-й корень".)
- MathJax имеет немного более смелый и крупный шрифт, а KaTeX немного стройнее.
Но, пожалуй, самым решающим из всех, я обнаружил, что общая обработка MathJax для страницы в среднем составила 1674 мс за три запуска. В отличие от KaTeX в среднем 128 мс, что на порядок лучше!
Есть несколько других точек сравнения, которые следует учитывать при просмотре соответствующих веб-сайтов:
- Основной веб-сайт KaTeX утверждает, что поддерживает большинство, но не все, LaTeX. Они перечисляют свои поддерживаемые функции здесь. MathJax также выражает некоторые ограничения. Хотя по быстрому взгляду трудно понять, кто в итоге имеет "лучшую" поддержку. В некоторых блогах, с которыми я сталкивался, говорят, что KaTeX имеет меньшую поддержку, но другие говорят, что в последние годы KaTeX значительно улучшил поддержку.
- Сайт MathJax рекламирует поддержку MathML как для ввода, так и для вывода. Некоторые проблемы KaTeX на его сайте github здесь и здесь указывают на то, что они поддерживают MathML для вывода, но не для ввода (я не знаю много о MathML, но, по крайней мере, это кажется важным, если вы хотите помочь пользователям с нарушениями зрения).
- KaTeX выполняет рендеринг синхронно, поэтому он не переформатирует страницу (что делает его более быстрым). Но взамен он временно блокирует браузер.
- Stackru является партнером MathJax (см. Здесь). Он используется на некоторых сайтах StackExchange, но не на самом Stackru из-за производительности загрузки страницы. Напротив, KaTeX был разработан Kahn Academy.
Исторически сложилось так, что рендеринг LaTeX и извлечение изображения были вашим лучшим выбором для кросс-платформенной, кросс-браузерной математики. MathML все больше и больше становится разумной альтернативой. Вот онлайн-конвертер, который будет генерировать MathML из разметки Tex, который затем можно будет вставить на свою веб-страницу. Я знаю, что браузеры на основе Gecko, такие как Firefox и Camino, хорошо работают с MathML, как и Opera. IE не работает из коробки, но есть плагины (как этот).
Texvc - отличная находка! Ванильный вывод HTML должен работать хорошо, если вы в основном заинтересованы в надстрочных индексах / подписках / курсиве / общих символах, но для более сложных вещей, имейте в виду, что самые популярные сайты, ориентированные на математику (например, Wolfram) генерируют изображения, поэтому может быть только так много, что вы можете сделать, если вы заинтересованы в кросс-браузерной совместимости:-(
Я прочитал все ответы здесь, и я удивлен, что никто не упомянул преобразование из PDF в HTML. Если вы используете pdf2htmlEX, он создаст прекрасные веб-страницы из pdf. Вам просто нужно скомпилировать ваш латекс в pdf (pdflatex).
По умолчанию он генерирует один HTML-файл с содержимым вашего PDF-файла из CSS, javascript и html. Я перепробовал много инструментов для преобразования латекса в html, и это, безусловно, самое лучшее и простое решение, которое я нашел.
Вы можете попробовать LaTexRenderer. Я не знаю, является ли это лучшим, но это работает.
Я определенно рекомендую вам взглянуть на MathML, если он подходит вам, но небольшая работа с JsTeX может дать вам все, что вам нужно.
Я не самый опытный программист, но нашел другое решение проблемы размещения уравнений LaTex на веб-странице.
Во-первых, давайте посмотрим на это:echo "<div id='test1'>"; echo "Some content is within this div."; echo "</div>";
Вышеуказанное представляет собой раздел с некоторым содержанием. Используя CSS, div 'test1' можно разместить в любом месте веб-страницы. Теперь рассмотрим следующее; Я знаю, это необычно, но, пожалуйста, посмотрите:
<?php echo "<div id='test2'>"; ?>
`\[`
`5^{e}+\sin \left( 2\uppi \right)`
`\]`
`<?php`
`echo "</div>";`
// Continue with php code...
Во втором примере элемент div разбит; он начинается в php сверху, затем заканчивается в php; уравнение LaTex затем записывается в HTML. Затем php возобновляет работу, и div завершается.
HTML находится внутри div. Его можно разместить в любом месте веб-страницы с помощью CSS, и вы пишете чистый LaTex в HTML, чтобы знать, как он будет выглядеть. Такое позиционирование LaTex меня устраивает — удачи!