Размер LaTex больше в HTML-спойлере

0

Я набрал код LaTex в спойлере, но размер разницы. Хотя их font-size одинаковый, но он больше обычного. Вот пример.

<span style="font-size: 11pt;">$\alpha\beta\gamma\delta$</span>
<a id="ex1" onclick="document.getElementById('exx1').style.display=''; document.getElementById('ex1').style.display='none';" class="link">[Show]</a>
<span id="exx1" style="display: none">
<a onclick="document.getElementById('exx1').style.display='none'; document.getElementById('ex1').style.display='';" class="link">[Hide]</a><br>
<span style="font-size: 11pt;">$\alpha\beta\gamma\delta$</span>
</span>

Как это исправить?

Скрипка здесь.

  • 0
    Добро пожаловать в ТАК. Пожалуйста, включите JsFiddle . Это поможет сузить вашу проблему. Ваш вопрос сейчас немного не по теме. Смотрите, какие темы я могу задать здесь? ,
  • 0
    @Palec У меня есть проблема в веб-дизайне, которая также является проблемой программирования. И я добавил скрипку.
Показать ещё 7 комментариев
Теги:
latex
mathjax

2 ответа

1
Лучший ответ

MathJax генерирует разную HTML и CSS разметку для двух формул. Первый имеет font-size: 126% а второй font-size: 130%.

Проблема заключается в выходном процессоре HTML-CSS, в частности, в опции matchFontHeight. Если установлено значение false, обе формулы имеют одинаковый font-size. См. Http://jsfiddle.net/C6tyz/3/.

Интересно то, что формулам присваивается разный font-size только тогда, когда сначала отображается первый, а второй скрыт. Я предполагаю, что MathJax генерирует вторую, прежде чем она будет отображаться в первый раз, и поэтому рассчитанный font-size зависит от первой формулы, которая уже отображается.

Никакой обходной путь, оставляющий matchFontHeight: true приходит мне на ум.

Поделиться
  • 0
    В ответ на предположение, что размер первого уравнения влияет на размер второго, это не правильно. Оба уравнения набираются при первой загрузке страницы и перед отображением любого из них. Проблема заключается в display:none CSS, как описано в моем ответе.
  • 0
    @DavideCervone У меня не было особого понимания MathJax. На самом деле я встретил это (сознательно) впервые. Я только что обнаружил, что matchFontHeight опция matchFontHeight и предположил, что в вычислении может быть ошибка. Теперь я знаю, что проблема заключается в необходимости использовать запасной вариант. Ваш ответ определенно намного лучше моего +1. Спасибо за объяснение!
2

Проблема здесь в том, что display: none для элемента exx1. Элементы, которые display: none не выложен браузером, и их размеры (например, (offsetHeight и offsetWidth) недоступны, поэтому MathJax не может определить размер окружающего шрифта или измерить любой из элементов, которые это необходимо для того, чтобы набирать математику. Чтобы обрабатывать математику, которая находится в контейнере, который display: none, он временно набирает его в <body> а затем перемещает результат в исходное местоположение. Это означает, что шрифт сопоставление выполняется с основным шрифтом корпуса, а не с шрифтом в этом месте. Вероятно, это источник проблемы. Разница между браузерами, возможно, связана с различием шрифтов по умолчанию, используемых для элемента body.

Я рекомендую вам не использовать display: none если содержание содержит математику. Существует несколько других методов, которые можно использовать для получения аналогичных результатов, в основном с использованием visibility: hidden и установление высоты до 0. См. Примеры из моего разговора на JMM в январе 2013 года (в частности, на display:none).

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню