Как написать интеграл?

В математике и физике встречаются интегралы двух типов: неопределённый и определённый. Различаются они наличием пределов интегрирования.

∫ x d x ∫ a b x d x
Неопределённый интеграл Определённый интеграл

Неопределённый интеграл с помощью MathML отобразить проще всего — это символ ∫, который вставляется в элемент <mo>.

<math display="block"> <mo>∫</mo> <mi>d</mi> <mi>x</mi> </math>

Для более сложных видов интегралов есть и другие математические символы:

  • ∫ — интеграл;
  • ∬ — двойной интеграл;
  • ∭ — тройной интеграл.

В примере 1 показано использование неопределённого интеграла.

Пример 1. Неопределённый интеграл

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> </head> <body> <p>Применяя формулу интегрирования по частям, найдите следующий неопределённый интеграл:</p> <math display="block"> <mo>∫</mo> <mi>x</mi> <mo>ln</mo> <mi>x</mi> <mi>d</mi> <mi>x</mi> <mtext>.</mtext> </math> </body> </html>

Для написания определённого интеграла в MathML применяется элемент <munderover>, схематично его можно представить так.

<munderover>
 ∫
 Нижний предел
 Верхний предел
</munderover>

К примеру, код MathML для интеграла с пределами от 0 до 1 будет следующим.

<math display="block"> <munderover> <mo>∫</mo> <mn>0</mn> <mn>1</mn> </munderover> </math>

В примере 2 показано использование элемента <munderover> для интеграла.

Пример 2. Определённый интеграл

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> </head> <body> <p>Найдите производную следующей функции:</p> <math display="block"> <mi>Φ</mi> <mo fence="true" form="prefix" stretchy="false">(</mo> <mi>x</mi> <mo fence="true" form="postfix" stretchy="false">)</mo> <mo>=</mo> <munderover> <mo>∫</mo> <mn>0</mn> <mi>x</mi> </munderover> <msup> <mi>t</mi> <mn>2</mn> </msup> <mi>sin</mi> <mi>t</mi> <mi>d</mi> <mi>t</mi> <mtext>.</mtext> </math> </body> </html>

Для более компактного отображения определённых интегралов, вместо <munderover> можно использовать элемент <msubsup>. Он выводит пределы не сверху, а справа от символа интеграла и схематично пишется так.

<msubsup>
 ∫
 Нижний предел
 Верхний предел
</msubsup>

В примере 3 показано использование <msubsup> для отображения определённого интеграла.

Пример 3. Элемент <msubsup>

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> </head> <body> <p>Вычислите следующий интеграл:</p> <math display="block"> <msubsup> <mo>∫</mo> <mrow> <mo>−</mo> <mi>π</mi> <mo>/</mo> <mn>4</mn> </mrow> <mrow> <mi>π</mi> <mo>/</mo> <mn>3</mn> </mrow> </msubsup> <mi>sin</mi> <mi>x</mi> <mi>d</mi> <mi>x</mi> <mtext>.</mtext> </math> </body> </html>

Интеграл может отображаться в двух разных вариантах — обычном и компактном, что зависит от использования атрибута display элемента <math>.

∫ a b x d x ∫ a b x d x
Обычное написание Компактное написание
  • <math display="block"> — обычное написание.
  • <math> — компактное написание.

При компактном написании интеграл отображается несколько уменьшенного размера, чтобы уместиться в строку текста (пример 4).

Пример 4. Интеграл в предложении

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> </head> <body> <p>Найдите все решения уравнения <math> <munderover> <mo>∫</mo> <mn>0</mn> <mi>⍺</mi> </munderover> <mi>cos</mi> <mo fence="true" form="prefix" stretchy="false">(</mo> <mi>x</mi> <mo>+</mo> <msup> <mi>⍺</mi> <mn>2</mn> </msup> <mo fence="true" form="postfix" stretchy="false">)</mo> <mi>d</mi><mi>x</mi> <mo>=</mo> <mi>sin</mi> <mi>⍺</mi> </math>, принадлежащие отрезку [2; 3].</p> </body> </html>

Для стилизации интегралов к элементам <mo>, <munderover> (или <msubsup>) следует добавить класс .int и для него уже задавать оформление. Поскольку пределы интегрирования могут быть как числом, так и переменной, можно обращаться к ним по порядковому номеру. Для этого используем псевдокласс :nth-child().

.int :nth-child(3) {
  color: blue;
}

С учётом псевдокласса у нас будут следующие селекторы для изменения стиля отдельных фрагментов интеграла.

.int { … } /* Стиль для всего интеграла */
.int > :nth-child(1) { … } /* Стиль для знака интеграла ∫ */
.int > :nth-child(2) { … } /* Стиль для нижнего предела */
.int > :nth-child(3) { … } /* Стиль для верхнего предела */

В примере 5 показано подключение математического шрифта для единообразного отображения формул в разных браузерах, а также изменения цвета пределов интегрирования.

Пример 5. Цвет текста

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> <style> @font-face { font-family: STIXTwoMath; src: url(/example/font/STIXTwoMath-Regular.woff2); } math { font-family: STIXTwoMath; /* Шрифт */ } .int :nth-child(2), .int :nth-child(3) { color: blue; /* Синий цвет */ } </style> </head> <body> <p>Доказать, что если функция <i>f(x)</i>, <i>x ∈ [−a; a]</i>, нечётная, то</p> <math display="block"> <munderover class="int"> <mo>∫</mo> <mrow> <mo>−</mo> <mi>a</mi> </mrow> <mi>a</mi> </munderover> <mi>f</mi> <mo fence="true" form="prefix" stretchy="false">(</mo> <mi>x</mi> <mo fence="true" form="postfix" stretchy="false">)</mo> <mi>d</mi><mi>x</mi> <mo>=</mo> <mn>0</mn> <mtext>.</mtext> </math> </body> </html>
MathML