Как сделать так, чтобы узел MathML, сгенерированный JavaScript, отображал так же, как эквивалентный статически записанный узел? - PullRequest
Новая
       33

Как сделать так, чтобы узел MathML, сгенерированный JavaScript, отображал так же, как эквивалентный статически записанный узел?

0 голосов
/ 03 марта 2020

Я пытаюсь написать динамическую c веб-страницу для детализации пользователя по арифметике c. Мое намерение состоит в том, чтобы кусок JavaScript сгенерировал арифметическую проблему c, собрал и представил узел MathML DOM, чтобы представить его пользователю, а затем обработал его ответ.

Я ожидаю рукописный текст Элемент MathML должен отображаться точно так же, как и «тот же» JavaScript -генерированный элемент. Но это не то, что я получаю со своим сценарием.

Вот рукописная версия: 

body {
	font: medium/1.5 sans-serif;
	margin: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	display: table;
}

math { font-family: sans-serif; }

#history {
	width: 16em;
	background: silver;
	display: table-cell;
}

#present {
	font-size: 3em;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

input {
	font-size: inherit;
	width: 4em;
	text-align: center;
	display: block;
	margin: auto;
}
<html>
<head>
<meta charset="UTF-8"/>
<title>Automatic Arithmetic Drill</title>
</head>
<body>
<div id="present"><math id="problem"><mrow><mn>5</mn><mo>+</mo><mn>5</mn></mrow></math><input id="answer"></input></div>
<div id="history">
</div>
</body>
</html>

Для меня это выглядит как Firefox 68.4.1esr (32-bit) в Debian, например: Usual spacing between elements.

Вот версия Dynamic c: 

function update_problem(left, infix, right) {
	var problem = document.createElement("math");
	var problem_row = document.createElement("mrow");
	var problem_left = document.createElement("mn");
	var problem_infix = document.createElement("mo");
	var problem_right = document.createElement("mn");
	var problem_left_text = document.createTextNode(left);
	var problem_infix_text  = document.createTextNode(infix);
	var problem_right_text = document.createTextNode(right);
	problem_left.appendChild(problem_left_text);
	problem_infix.appendChild(problem_infix_text);
	problem_right.appendChild(problem_right_text);
	problem_row.appendChild(problem_left);
	problem_row.appendChild(problem_infix);
	problem_row.appendChild(problem_right);
	problem.appendChild(problem_row);
	var old_problem = document.getElementById("problem");
	old_problem.replaceWith(problem);
	problem.id = "problem";
}

update_problem(5, "+", 5);
body {
	font: medium/1.5 sans-serif;
	margin: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	display: table;
}

math { font-family: sans-serif; }

#history {
	width: 16em;
	background: silver;
	display: table-cell;
}

#present {
	font-size: 3em;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

input {
	font-size: inherit;
	width: 4em;
	text-align: center;
	display: block;
	margin: auto;
}
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8"/>
<title>Automatic Arithmetic Drill</title>
</head>
<body>
<div id="present"><math id="problem"></math><input id="answer"></input></div>
<div id="history">
</div>
</body>
</html>

Для меня это выглядит так:

No spacing between elements.

As Вы можете видеть, что в случае stati c существует интервал MathML по умолчанию между элементами mn, mo и mn, но в случае динамического c интервал отсутствует. Я хочу, чтобы сгенерированная версия выглядела точно так же, как и версия stati c.

Думая, что динамически сгенерированные узлы не имеют своих атрибутов по умолчанию, я попытался добавить 

problem_infix.setAttribute("lspace", (5.0 / 18.0).toString() + "em");
problem_infix.setAttribute("rspace", (5.0 / 18.0).toString() + "em");

, но это сделало без разницы.

Я не могу найти никаких ресурсов по этому поводу; MathML, похоже, не находит широкого применения.

Как я могу исправить интервал для сгенерированного JavaScript узла?

...