Как сделать формулу с mathjax отзывчивым

Question

У меня есть большая проблема с отображением математических выражений на моем отзывчивом сайте. В частности, если вы посетите this page со смартфоном, вы увидите, что большинство математических выражений отключены из-за гибкого дизайна. Я использую Joomla и Jextbox Equation plugin для их отображения.

Я хочу, чтобы формула на моей странице вела себя как this one on Wikipedia. Если вы откроете эту страницу на своем смартфоне, вы увидите, что, когда формулы слишком длинны, они не обрезаются. Они отображаются, если вы пролистаете слева направо. Я хотел бы сделать то же самое на своей странице.

Answer 1

С the documentation по активации MathJax по линии ломку:

The HTML-CSS and SVG output processors implement (most of) the MathML3 >automatic line-breaking specification. (The NativeMML output processor relies on the browser’s native MathML support to handle line breaking when it is used.) Since line-breaking takes extra processing and so can slow down the mathematical output, it is off by default, but you can enable it by adding

<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({ 
"HTML-CSS": { linebreaks: { automatic: true } }, 
     SVG: { linebreaks: { automatic: true } } 
}); 
</script> 

to your page just before the tag that loads MathJax.js itself.

Однако, в вашем примере, есть много табличного математики, то есть, расположение с помощью <mtables> (хотя людей, использующих TeX, как ввод часто неизвестен, MathJax преобразует все входы в MathML внутри).

Проблема заключается в том, что mtables не может быть разбит на строки, так же как и таблицы html не могут быть разбиты на строки. Для гибких таблиц нужна помощь JS и, что более важно, дополнительная семантическая разметка.

PS: Для чего это стоит, мы на самом деле работаем над семантической эвристикой для математики, чтобы сделать что-то лучше, чем линейное, но это продолжается. R & D без ETA.

Answer 2

Я посетил user3700643's page и вижу, что все еще есть проблемы --- это, когда я использую «Отзывчивый дизайн» Firefox в 320 × 487. Мое решение - это doofus, которого я знаю, поскольку это требует некоторого дублирования, но я использовал его не только с MathJax (только сейчас), но и в прошлом для таблиц и других вещей --- все в среде grid-бутстрапа Twitter, но я довольно уверен, что это не имеет значения.

Я пользуюсь CSS3 @media Rule. Вот моя конкретная версия:

@media(max-width:768px){ 
    .wide {display:none;} 
    .mobilefont {font-size:0.8em;} 
} 
@media(min-width:768px){ 
    .tight {display:none;} 
} 

Я просто бросил бит мобильного телефона, чтобы еще больше вдохновить вас. Я иногда использую его. Итак, что я делаю, это обернуть уравнение. Я использую Latex с MathJax --- с div и даю div классу «wide», если уравнение отформатировано для широкого экрана и «жестко», если оно отформатировано для небольшого экрана. Вы можете видеть, как значения max-width/min-width в CSS3 влияют на исчезновение divs, у которых есть эти имена классов, в зависимости от того, больше ли ширина экрана или меньше 768 пикселей, что является популярной точкой останова (но другие могут быть определенный вами).

То есть, я дублирую свой блок большого экрана \ begin {align} \ end {align}. Я вставляю копию прямо под оригиналом и обертываю каждый с помощью div и даю двум divs эти два имени класса. Затем я редактирую тот, у кого есть «плотное» имя класса, чтобы он работал в Ревизионном дизайне с небольшим размером экрана.

Я также сделал это за пределами контекста MathJax с простыми таблицами. Например, я использовал < td class = "wide" > в каждом <td> данного столбца таблицы, чтобы этот столбец исчез на устройствах малого экрана.

На вашей странице, где у вас есть «L'integrale di partenza sarà allora la somma degli integrali sui due domini», в вашей «жесткой» версии div вы могли бы, если бы вы использовали \ begin {align} \ end { align} (но я вижу, что вы на самом деле используете \ begin {eqnarray *}, который я не тестировал с помощью этой схемы), просто поставьте амперсанд перед этим двойным интегралом слева, а затем символы новой строки \ \ после этого интеграла разбить на новую строку. И поставьте амперсанды перед каждым символом равенства на каждой строке. Таким образом, линии, начинающиеся с знаков равенства, будут перемещены далеко влево, выровненные по выражению для интеграла, а не справа от него.

Это не было бы слишком запутанным, я не думаю. Это немного неортодоксально. Но см. Мой комментарий к ответу Питера Краутцбергера ... Я обнаружил, что его сценарий не работает, когда я использую амперсанд. Но дело в том, что он вообще не нужен с моим подходом CSS3, поскольку я просто указываю все переформатирование самостоятельно.