Отображение MathJax в пределах измерения диапазона
Я программно создаю теги HTML для отображения формул LaTeX с помощью MathJax. Похоже, что формула отображается после расчета размера тега <span>. Я хочу убедиться, что формула отображается в границах диапазона. Что это за исправление, спрошу!?
скрипт.js
formula = "${{{{{{x^2}^2}^2}^2}^2}^2}^2$"
question_div = document.createElement("div");
question_div.setAttribute("id", "q1");
let input = document.createElement("input");
input.name = "a1";
input.id = "a1";
input.type = "radio";
let label = document.createElement("label");
let span_label = document.createElement("span");
span_label.setAttribute("class", "my-span");
span_label.innerText = formula;
label.appendChild(input);
label.appendChild(span_label);
question_div.appendChild(label);
document.body.appendChild(question_div);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
<title>title</title>
<link rel = "stylesheet" href = "styles.css" />
</head>
<body>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<script id = "MathJax-script" async
src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
<script type = "text/javascript" src = "script.js"></script>
</body>
</html>
стили.css
label {
border: 1px solid rgb(199, 199, 199);
margin: 5px;
padding: 4px;
cursor: pointer;
}
div{
padding-top:8px;
padding-bottom:8px;
}
.my-span{
padding-left:8px;
}
Вы просите, чтобы граница диапазона была большой, чтобы вместить математические данные, или чтобы математические значения были меньше, чтобы оставаться внутри текущей границы?
—
13.04.2024 13:52
@DavideCervone, я хочу, чтобы размер диапазона соответствовал математическому измерению. В этом случае высота промежутка должна быть больше, а математическая формула остается неизменной.
—
13.04.2024 16:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
51
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Высота и глубина элемента с display: inline, как и <span>, (для границ и фона) будет равна высоте и глубине шрифта, используемого в элементе, независимо от высоты и глубины других элементов внутри него. Например:
#span1 {
border: 1px solid black;
}
#span2 {
display: inline-block;
height: 4em;
width: 1em;
vertical-align: -1.75em;
background-color: red;
}<span id = "span1">This span has a tall element
<span id = "span2"></span> but its height stays the same</span>Итак, то, что вы видите на выходе MathJax, — это правильный результат.
Чтобы его высота и глубина соответствовали содержимому, вам нужно использовать display: inline-block (есть и другие значения, которые также подходят для этого).
#span1 {
display: inline-block;
border: 1px solid black;
}
#span2 {
display: inline-block;
height: 4em;
width: 1em;
vertical-align: -1.75em;
background-color: red;
}<span id = "span1">This span has a tall element
<span id = "span2"></span> and its height matches that</span>Итак, в вашем примере, добавив display: inline-block к CSS-метке, вы получите
formula = "${{{{{{x^2}^2}^2}^2}^2}^2}^2$"
question_div = document.createElement("div");
question_div.setAttribute("id", "q1");
let input = document.createElement("input");
input.name = "a1";
input.id = "a1";
input.type = "radio";
let label = document.createElement("label");
let span_label = document.createElement("span");
span_label.setAttribute("class", "my-span");
span_label.innerText = formula;
label.appendChild(input);
label.appendChild(span_label);
question_div.appendChild(label);
document.body.appendChild(question_div);label {
display: inline-block;
border: 1px solid rgb(199, 199, 199);
margin: 5px;
padding: 4px;
cursor: pointer;
}
div{
padding-top:8px;
padding-bottom:8px;
}
.my-span{
padding-left:8px;
}<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<script id = "MathJax-script" async src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>Другие вопросы по теме
Выбор и отображение изображения в html
Css: анимация перед пульсом не работает
Перемещение вертикальной полосы прокрутки при прокрутке страницы
Bootstrap Accordion не запускается с правильным значком
Как построить график функций с асимптотическим поведением, таких как tan(x), ln(x) и log(x) в JavaScript?
Почему для моего оператора «includes» требуется вся строка?
HTML-кнопки, позволяющие кнопке «Показать» действовать как кнопка «Скрыть», а также кнопка «Показать»
Извлеките простой HTML после преобразования JS с помощью R и chromote
Как динамически отображать данные в HTML-таблицу в ответ?
Некоторые шрифты Google не импортируются в CSS в Windows
Похожие вопросы
Как изменить веб-камеру opencv файла Python с помощью Flask?
Почему console.info(typeof foo) возвращает неопределенное значение?
Загрузить файл по индексу объекта файлов
Перемещение вертикальной полосы прокрутки при прокрутке страницы
Использование дискретных цветов для заполнения карты в Mapboxgl вместо интерполированных цветов по умолчанию?
Как заставить Stripe checkout.js работать на Edge и Chrome (мобильный)
Как прокручивать каждые 4 элемента div с помощью кнопок боковой прокрутки?
Темный режим не синхронизируется должным образом?
Nest js dчтобы разрешить массив строк и только строку
Как обрабатывать принудительное нажатие сенсорной панели в Macos/Chrome?
я думаю, что это из-за лейбла