К элементам MathML стили применяются аналогично элементам HTML. При этом в математических выражениях можно менять цвет текста и фона, управлять величиной отступов, задавать выравнивание и др.
Применение стиля к определённым элементам
Используя селекторы элемента, такие как mo, mi и др., можно задавать стиль отдельных элементов MathML. В примере 1 размер текста в <math> увеличен через font-size, а цвет переменных <mi> установлен с помощью свойства color.
Пример 1. Цвет переменных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>MathML</title>
<style>
math {
font-size: 1.2em; /* Размер всего выражения */
}
mi {
color: brown; /* Цвет текста */
}
</style>
</head>
<body>
<math display="block">
<msup>
<mrow>
<mo fence="true" form="prefix" stretchy="false">(</mo>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
<mo fence="true" form="postfix" stretchy="false">)</mo>
</mrow>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>2</mn><mi>a</mi><mi>b</mi>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</math>
</body>
</html>
Стиль на основе атрибутов
Стиль элемента можно задавать, основываясь на имеющихся у него атрибутов. К примеру, скобки в MathML добавляются через элемент <mo> с атрибутом fence.
<mo fence="true" form="prefix">(</mo>
Чтобы установить стиль только у элементов <mo> с атрибутом fence, можно воспользоваться селектором mo[fence], как это показано в примере 2.
Пример 2. Использование атрибутов
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>MathML</title>
<style>
mo[fence] {
color: brown;
}
</style>
</head>
<body>
<math display="block">
<msup>
<mrow>
<mo fence="true" form="prefix">(</mo>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
<mo fence="true" form="postfix">)</mo>
</mrow>
<mn>2</mn>
</msup>
</math>
</body>
</html>
Стилевые классы
Для управления видом отдельных элементов MathML, к ним можно добавить стилевые классы через атрибут class.
<mo class="operator">=</m>
Затем в стилях просто обращаемся к классу и определяем его вид.
.operator { color: red; }
В примере 3 класс vector добавляется к элементам <mi> для обозначения векторов, которые выделяются жирным начертанием.
Пример 3. Использование классов
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>MathML</title>
<style>
.vector {
font-weight: bold; /* Жирное начертание */
}
</style>
</head>
<body>
<math display="block">
<mi>OC</mi>
<mo>=</mo>
<mo fence="true" form="prefix">|</mo>
<mi class="vector">a</mi>
<mo>+</mo>
<mi class="vector">b</mi>
<mo fence="true" form="postfix">|</mo>
</math>
</body>
</html>
Стилевые свойства MathML
CSS содержит несколько свойств и значений, предназначенных для работы только с MathML. Рассмотрим два наиболее популярных и поддерживаемых браузерами свойства.
Свойство display
Это свойство достаточно универсально и часто применяется в вёрстке веб-страниц. Для элемента <math> используется два варианта:
math { display: inline math; /* Строчный элемент */ }
math { display: block math; /* Блочный элемент */ }
Обратите внимание, что у display два значения, разделённых пробелом. Браузеры Safari и Firefox не поддерживают значение math, так что в этих браузерах формула не будет выравниваться по центру. Для них добавим ещё одно свойство display со значением block, как это показано в примере 4.
Пример 4. Использование свойства display
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>MathML</title>
<style>
.math-block {
display: block; /* Для Firefox и Safari */
display: block math; /* Блочный элемент */
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<math class="math-block">
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi><mo>=</mo><mn>1</mn>
</mrow>
<mn>∞</mn>
</munderover>
<mfrac>
<mn>1</mn>
<mrow>
<msup>
<mn>3</mn>
<mi>n</mi>
</msup>
</mrow>
</mfrac>
</math>
</body>
</html>
Свойство math-style
Атрибут display со значением block, добавленный к элементу <math>, выравнивает выражение по центру и отображает его в обычной, а не компактной форме.
<math display="block">
Компактная форма для выражений используется по умолчанию и её можно увидеть в предыдущем примере. Она предназначена для вывода формул в текстовой строке и отличается следующими характеристиками:
- текст уменьшается;
- вертикальные промежутки в степенях и дробях становятся меньше;
- пределы интегрирования и суммирования располагаются не сверху, а справа от знаков интеграла и суммы.
Для управления видом выражений предназначено свойство math-style, значение normal которого отображает выражение в обычной, а не компактной форме. Таким образом, вместо написания атрибута display мы можем использовать стили.
math {
display: block; /* Для Firefox и Safari */
display: block math; /* Блочный элемент */
text-align: center; /* Выравнивание по центру */
math-style: normal; /* Обычное отображение */
}
В примере 5 показано выравнивание формулы по центру и её написание в обычном виде с помощью свойства math-style.
Пример 5. Использование math-style
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>MathML</title>
<style>
.formula {
display: block;
display: block math;
text-align: center;
math-style: normal;
}
</style>
</head>
<body>
<math class="formula">
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi><mo>=</mo><mn>1</mn>
</mrow>
<mn>∞</mn>
</munderover>
<mfrac>
<mn>1</mn>
<mrow>
<msup>
<mn>3</mn>
<mi>n</mi>
</msup>
</mrow>
</mfrac>
</math>
</body>
</html>
Итоги
- Стили применяются к элементам MathML теми же способами, что и в HTML.
- Для блочного отображения выражений предназначено свойство display со значением block math.
- За обычное и компактное отображение математических выражений отвечает свойство math-style.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 28.04.2024