Как написать квадратный корень?

Квадратный корень — это операция, обратная возведению в квадрат, иными словами, когда число умножается на само себя.

a=x·x=x2 ⇔x=a

Например, квадратный корень из 25 равен 5, потому что 5 в квадрате равно 25.

52=25; 25=5

Для отображения квадратного корня в MathML используется элемент <msqrt>, внутри которого находится единственный дочерний элемент. К примеру, квадратный корень из числа 25 запишется следующим образом.

Код примера скопирован в буфер
<math>
 <msqrt>
  <mn>25</mn>
 </msqrt>
</math>

Если подкоренное выражение должно состоять из нескольких частей (к примеру, x+1), его следует поместить в элемент <mrow>.

Код примера скопирован в буфер
<math>
 <msqrt>
  <mrow>
   <mi>x</mi>
   <mo>+</mo>
   <mn>1</mn>
  </mrow>
 </msqrt>
</math>

Таким образом, внутри <msqrt> непосредственно располагается единственный <mrow>, а уже внутри него допустимо вкладывать произвольное число других элементов.

Сложные подкоренные выражения, например, содержащие дроби и степени, не всегда идентично отображаются в разных браузерах. Для единообразия стоит подключить специальный математический шрифт и применить его к элементу <math>. Один из таких шрифтов, XITS Math, можно загрузить с этого сайта или подключить через <link>.

В примере 1 показано подключение шрифта XITS Math через @font-face и использование элемента <msqrt>.

Пример 1. Квадратный корень

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>MathML</title>
  <style>
   @font-face {
    font-family: XITSMath; /* Название шрифта */
    src: url(/example/font/XITSMath-Regular.woff2); /* Файл шрифта */
   }
   math {
    font-family: XITSMath; /* Указываем шрифт */
   }
  </style>
 </head>
 <body>
  <p>Решите уравнение</p>
  <math display="block">
   <msqrt>
    <mrow>
     <mfrac>
      <mrow>
       <mi>x</mi>
       <mo>−</mo>
       <mn>4</mn>
      </mrow>
      <mi>x</mi>
     </mfrac>
    </mrow>
   </msqrt>
   <mo>+</mo>
   <msqrt>
    <mrow>
     <mfrac>
      <mrow>
       <mn>3</mn>
       <mi>x</mi>
       <mo>+</mo>
       <mn>4</mn>
      </mrow>
      <mi>x</mi>
     </mfrac>
    </mrow>
   </msqrt>
   <mo>=</mo>
   <mn>2</mn>
  </math>
 </body>
</html>
MathML