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

Из документации по активации разбиения строк MathJax:

Процессоры вывода HTML-CSS и SVG реализуют (большую часть) спецификацию MathML3 >automatic line-breaking. (Процессор вывода NativeMML полагается на собственную поддержку MathML браузера для обработки разрыва строки при его использовании.) Поскольку разрыв строки требует дополнительной обработки и, следовательно, может замедлить математический вывод, по умолчанию он отключен, но вы можете включить его с помощью добавление

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

на вашу страницу непосредственно перед тегом, загружающим сам MathJax.js.

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

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

PS: Как бы то ни было, мы на самом деле работаем над семантической эвристикой для математики, чтобы сделать что-то лучше, чем разбиение строк, но это текущие исследования и разработки без ETA.

Я посетил страница и вижу, что проблемы все еще есть — это когда я использую вид адаптивного дизайна Firefox с разрешением 320×487. Я знаю, что мое решение глупо, так как оно требует некоторого дублирования, но я использовал его не только с MathJax (только сейчас), но и в прошлом для таблиц и других вещей --- все в среде сетки Twitter Bootstrap, но я уверен, что это не имеет значения.

Я использую 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 класс "широкий", если уравнение отформатировано для широкого экрана и "узкий", если он отформатирован для маленького экрана. Вы можете видеть, как значения max-width/min-width в CSS3 влияют на исчезновение элементов div с этими именами классов в зависимости от того, больше или меньше ширина экрана 768 пикселей, что является популярной точкой останова (но другие могут быть определено вами).

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

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

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

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

Вы можете добиться этого с помощью css следующим образом:

mjx-container mjx-math {
    white-space: normal;
}

Все, что вам нужно сделать, это использовать адаптивные таблицы. Настройте свои таблицы и проблема решена. например, если вы используете Wordpress, используйте плагин WP Responsive Table. Если вы кодируете свой веб-сайт самостоятельно, используйте адаптивную таблицу Bootstrap. При необходимости используйте прозрачные границы и добавьте свой код MathJax внутрь таблицы.