Размер шрифта Mathjax уменьшается при игре с атрибутом `position` CSS

Я хочу сделать HTML-документ со списком математических формул, имитирующих латексную среду \itemize (т.е. маркеры должны быть как« 1), 2) и т. Д. ») И Я хотел бы иметь двухколоночный макет.Размер шрифта Mathjax уменьшается при игре с атрибутом `position` CSS

Для математических формул, которые я использую MathJax для маркеров я использовал CSS трюк в https://stackoverflow.com/a/1636635/3025740 и для двух колонок я использую CSS свойства column-count добавляющих поставщика конкретных свойства, как в http://www.w3schools.com/cssref/css3_pr_column-count.asp

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

Вот минимальный код, чтобы воспроизвести проблему (проверено на Ubuntu 16.04 LTS с Firefox 49.0.2)

<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <script type="text/javascript" async 
 
\t \t src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"> 
 
\t \t </script> 
 
\t \t <style media="screen"> 
 
\t \t \t ol { 
 
\t \t \t \t counter-reset: list; 
 
\t \t \t } 
 
\t \t \t ol > li { 
 
\t \t \t \t list-style: none; 
 
\t \t \t \t /*removing this property fixes MathJax size but breaks markers*/ 
 
\t \t \t \t position: relative; 
 
\t \t \t } 
 
\t \t \t ol > li:before { 
 
\t \t \t \t counter-increment: list; 
 
\t \t \t \t content: counter(list, decimal) ") "; 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t left: -1.4em; 
 
\t \t \t } 
 
\t \t \t .twocolumns { 
 
\t \t  -webkit-column-count: 2; 
 
\t \t  -moz-column-count: 2; 
 
\t \t  column-count: 2; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="twocolumns"> 
 
\t \t \t <ol> 
 
\t \t \t \t <li>\(2 \times 5\)</li> 
 
\t \t \t \t <li>\(4 \times (2 +11)\)</li> 
 
\t \t \t \t <li>\(4 \times 5 - 2 \times 7\)</li> 
 
\t \t \t \t <li>\(4 \times (87 - 45) + 5 \times 2\)</li> 
 
\t \t \t </ol> 
 
\t \t </div> 
 
\t </body> 
 
</html>

Как указано в сниппета извлекая position: relative; в ol > li в CSS исправляет проблемы с размером MathJax. К сожалению, это также нарушает маркерный трюк (маркеры исчезают)

Любая идея, как сделать эту работу?

источник

2016-11-17 Cédric Van Rompay

Это похоже на ошибку, влияющую на FF, а также Edge (Chrome и Safari, похоже, отлично). Я подал ошибку на нашем конце по адресу https://github.com/mathjax/MathJax/issues/1664. На других выходах эта проблема отсутствует. –

Примечание от будущего: cdn.mathjax.org приближается к концу своего срока службы, проверьте https://www.mathjax.org/cdn-shutting-down/ на советы по миграции. –

MathJax использует относительно высокий ящик (60 экст.), Чтобы определить высоту окружающего шрифта, и похоже, что FF и Edge делают что-то смешное с размером этого поля в настройках нескольких колонок. Кажется, что они перекрывают ширину и высоту, установленные MathJax для этого поля, и поэтому MathJax получает неправильную высоту ex-height (и поэтому устанавливает неправильное масштабирование шрифта). Поскольку и FF, и IE делают это, возможно, это правильное поведение по спецификации HTML или CSS, а WebKit ошибочно. Я не пытался это понять.

В любом случае получается, что добавление overflow:hidden к CSS для тестового элемента, используемого MathJax, разрешает проблему (браузеры в этом случае не испортивают высоту по причинам, не зависящим от моего понимания), поэтому добавление

<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({ 
    CommonHTML: { 
    styles: {".mjx-ex-box-test": {overflow: "hidden"}} 
    } 
}); 
</script>

на страницу, или добавление

.mjx-ex-box-test { 
    overflow: hidden; 
}

в файл CSS должен решить эту проблему.

источник

2016-11-20 23:54:02

Размер шрифта Mathjax уменьшается при игре с атрибутом `position` CSS

ответ

Смежные вопросы