Html формула как написать

Overview: First steps
Next

In this article, we will take a simple HTML document and see how to add MathML formulas into it, introducing a few elements along the way.

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, and HTML basics (study Introduction to HTML.)
Objective:	To understand the basic syntax of MathML and how to integrate it in HTML pages.

Inserting formulas in HTML via the <math> element

MathML uses the same syntax as HTML to represent a tree of elements and attributes. In particular, each mathematical formula is represented by an element <math> which can be placed inside an HTML page. In the following document, it is inside a paragraph of text:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>My first math page</title>
  </head>
  <body>
    <p>
      The fraction
      <math>
        <mfrac>
          <mn>1</mn>
          <mn>3</mn>
        </mfrac>
      </math>
      is not a decimal number.
    </p>
  </body>
</html>

The <mfrac> element specifies a fraction with a numerator (its first child) and a denominator (its second child). This is how it renders in your browser:

Warning: If you just see «1 3» instead of a fraction, then your browser may not support MathML. Check out the browser compatibility table for further details.

The display attribute

Note that in the previous example, the formula is on the same line as the text of the paragraph. However, it is quite common to instead render large mathematical formulas centered on their own line as shown below. To achieve that, you need to attach a display="block" attribute on the <math> element.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>My first math page</title>
  </head>
  <body>
    <p>
      The fraction
      <math display="block">
        <mfrac>
          <mn>1</mn>
          <mn>3</mn>
        </mfrac>
      </math>
      is not a decimal number.
    </p>
  </body>
</html>

You may also notice some subtle change in the appearance: the text and vertical spacing of the fraction becomes a bit bigger. Without the display="block" attribute, the height is minimized to avoid disturbing the flow of the surrounding text. With the display="block" attribute, priority is instead put on legibility of the mathematical formula.

Note: This corresponds to the LaTeX’s concept of inline formulas (delimited by dollar signs $...$ ) and display formulas (delimited by [...]).

Note: The appearance change mentioned above is actually controlled by the math-style property which is initially normal for <math display="block"> and compact otherwise. In some MathML subtrees, this property can then automatically become compact but we will ignore this subtlety for this introductory tutorial. Again, this is similar to LaTeX.

Grouping with the <mrow> element

The <math> element can actually contain an arbitrary number of children and will essentially render them in a row. For instance, the simple formula «1 + 2 + 3» would be encoded like this in MathML:

<math>
  <mn>1</mn>
  <mo>+</mo>
  <mn>2</mn>
  <mo>+</mo>
  <mn>3</mn>
</math>

The <mrow> element is a generic container that performs similar layout but can be placed anywhere in the MathML subtree. It is helpful to group several elements together. For instance, the numerator of the following fraction (its first child) is «one plus two».

<math>
  <mfrac>
    <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
    <mn>3</mn>
  </mfrac>
</math>

Active learning: nested expressions

As an exercise, figure out how to write the following expressions using only the MathML elements we’ve seen so far. If you are stuck or want to verify the solution, check the source code of the example.

<ol>
  <li>
    "one half" plus "two third":
    <!-- It's correct but unnecessary to group the children of the math element with an mrow element. -->
    <math>
      <mfrac>
        <mn>1</mn>
        <mn>2</mn>
      </mfrac>
      <mo>+</mo>
      <mfrac>
        <mn>2</mn>
        <mn>3</mn>
      </mfrac>
    </math>
  </li>
  <li>
    "one plus two plus three" over "four plus five":
    <math>
      <mfrac>
        <mrow>
          <mn>1</mn>
          <mo>+</mo>
          <mn>2</mn>
          <mo>+</mo>
          <mn>3</mn>
        </mrow>
        <mrow>
          <mn>4</mn>
          <mo>+</mo>
          <mn>5</mn>
        </mrow>
      </mfrac>
    </math>
  </li>
  <li>
    "one quarter" over "two plus three":
    <math>
      <mfrac>
        <mfrac>
          <mn>1</mn>
          <mn>4</mn>
        </mfrac>
        <mrow>
          <mn>2</mn>
          <mo>+</mo>
          <mn>3</mn>
        </mrow>
      </mfrac>
    </math>
  </li>
</ol>

Summary

In this article, we have taken a look at how to use the <math> element to insert a mathematical formula inside a HTML document. We have learned about rendering differences between <math> elements that use display="block" or not. In addition, we stumbled upon a couple of other MathML elements: <mfrac> for fractions, <mrow> for grouping and finally a few text elements. We will analyze these text containers further in the next article.

Overview: First steps
Next

QUICK SLIDES

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

All right, let us now get into the various ways and examples of writing Math equations in HTML.

METHOD 1) HTML SYMBOLS & TAGS

1A) BASIC HTML MATH SYMBOLS

1a-symbols-tags.html

<h1>NOT EQUAL</h1>
<p>1 + 1 ≠ 11</p>

<h1>CUBE ROOT</h1>
<p>∛ 27 = 3</p>

<h1>POWER OF</h1>
<p>3<sup>4</sup> = 81</p>

Just what kind of sorcery is this? What is that &#8731 and <sup> tag?

In short, there are a ton of HTML symbols available, and we can define them using &CODE;. For example, ≠ above “translates” to the “not equals” symbol.
HTML symbols are not restricted to only Math. There are also many other icons, smileys, arrows, etc…
I will leave a link to a complete list of Math symbols in the extras section below.
<sup> is but a simple superscript tag.
Not in the above example, but the other useful one is the <sub> subscript tag.

1B) MORE MATH WITH CSS

1b-css-equation.html

<style>
/* (A) MATH SYMBOL "WRAPPER" */
.math { display: inline-block; }
 
/* (B) SMALL FONT SIZE FOR SUPER & SUB SCRIPT */
.math .smol {
  font-size: 0.9em;
  height: 0.9em;
}
 
/* (C) BIG FONT SIZE FOR SYMBOL ITSELF */
.math .big {
  font-size: 1.4em;
  height: 1.4em;
}
</style>

<h1>SUMMATION</h1>
<div class="math">
  <div class="smol">n</div>
  <div class="big">∑</div>
  <div class="smol">i=1</div>
</div>

<div class="math">
  <div class="smol">&nbsp;</div>
  <div class="big">c = cn</div>
  <div class="smol">&nbsp;</div>
</div>

As you might have seen from the above, those are only simple equations. If we want to have “advanced equations” such as summation… Things are going to get a little rough. In a nutshell:

We have created “3 layers” .math containers here.
For the first <div class="math"> –
- Both the top and bottom .smol layers are used to specify the upper and lower limits respectively.
- The middle layer ∑ is the summation (sigma) symbol.
For the second <div class="math"> –
- Both the top and bottom .smol layers are empty with a white space  .
- The middle layer is the formula c = cn.

Yep… This is kind of a painful way to do it, but it works.

METHOD 2) MATH LIBRARY

2A) MATH EQUATIONS WITH TEX

2a-mathjax-tex.html

<!-- (A) LOAD THE MATHJAX LIBRARY -->
<!-- DOCS: https://docs.mathjax.org/en/latest/basic/mathematics.html -->
<!-- DEMO: https://github.com/mathjax/MathJax-demos-web -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<!-- (B) TEX EQUATION -->
$$sum_{i=1}^nc=cn$$

Following up on the above, there are thankfully libraries that we can use. This is a popular one called MathJax, and it supports multiple “Math Code Languages” – Tex, LaTeX, MathML, and AsciiMath. While this library is not the friendliest for beginners, this is still way better than manually creating formulas using raw HTML and CSS.

P.S. I will leave links for the library tutorials in the extra section below.

2B) MATH EQUATIONS WITH MATHML

2b-mathjax-mathml.html

<math display="block">
  <!-- (A) DF / DX -->
  <mfrac>
    <mrow>
      <mi>d</mi><mi>f</mi>
    </mrow>
    <mrow>
      <mi>d</mi><mi>x</mi>
    </mrow>
  </mfrac>
 
  <!-- (B) = -->
  <mo>=</mo>
 
  <!-- (C) DF / DU -->
  <mfrac>
    <mrow>
      <mi>d</mi><mi>f</mi>
    </mrow>
    <mrow>
      <mi>d</mi><mi>u</mi>
    </mrow>
  </mfrac>
 
  <!-- (D) . -->
  <mo>⋅</mo>
 
  <!-- (E) DU / DX -->
  <mfrac>
    <mrow>
      <mi>d</mi><mi>u</mi>
    </mrow>
    <mrow>
      <mi>d</mi><mi>x</mi>
    </mrow>
  </mfrac>
</math>

This is another example of the Mathjax library, but using the MathML “language”. I personally prefer this over the “less human” Tex and LaTeX – As you can see, this is a lot more similar to HTML and easier to understand.

METHOD 3) IMAGE EQUATIONS

3A) ONLINE EQUATION EDITORS

If all else fails, we can always go back to the old school “write on a piece of paper, take a photo, post online”. But here is a small twist to make things look better. There are quite a lot of online tools that allow us to write Math equations easily. Here are a few of them:

Online LaTex Equation Editor – Code Cogs
Mathcha – Online Math Editor
iMathEQ

Just do a search for “latex online editor”, “Math equation online”, or “latex to image”, and there will be plenty.

3B) LATEX TO IMAGE

What’s next is to simply use one of these tools to create the equation, and download it as an image accordingly – Finally, insert this image into your HTML file. Captain Obvious to the rescue.

LINKS & REFERENCES

HTML Math Symbols – ginifab.com
MathJax – Official Website | Documentation | Examples
MathML Tutorial – Tutorialspoint

INFOGRAPHIC CHEAT SHEET

How to Write Math Equations In HTML (click to enlarge)

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

Время на прочтение
4 мин

Количество просмотров 36K

До выхода HTML5 использование формул было сущим наказанием. Судите сами: в 2005-м необходимо было иметь под рукой либо специальный браузер, либо разбивать текст на собственно HTML и вставки из изображений или PDF. Поиск и прочие операции редактирования и/или вывода на экран/бумагу был неоднозначной задачей, коей посвящались целые монографии.

В 2012-м было уже попроще. Появилась возможность подключать необходимые плагины (Firemath для FireFox и Daum Equation Editor для Chrome). Но неоднозначность стандартов (и поддержки) фактически заставляла писать одну и ту же статью для каждого из браузеров (и для их версий). Или встречать пользователей волшебным приветствием «Ваш браузер надо обновить/дополнить расширением».

Неудобно? — Да! Отнимало много времени на поиск универсального решения? — Да! Заставляет думать о том, какой тип записи лучше (презентационный или содержательный), каким конвертером пользоваться (а их только общеизвестных с десятка полтора)? — ДА! ДА! ДА!

В результате работа по публикации превращалась в освоение двух-трех лексиконов разметки и изучения работы минимум одной программы-перекодировщика.

Теперь, с приходом HTML5, все стало намного проще. В нем появился новый контейнер <math>.
Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.
Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.

Атрибуты тэга

В дополнение к следующим атрибутам, тэг <math> воспринимает любые атрибуты из <mstyle>.

class, id, style
При условии использования вместе с таблицами стилей.
dir
Указывает направление формулы: ltr — слева направо или rtl — справа налево.
ref
Используется для установки гиперссылки на указанный URI.
mathbackground
Цвет фона. Вы можете использовать #rgb, #rrggbb и названия цветов HTML .
mathcolor
Цвет текста. Вы можете использовать #rgb, #rrggbb и названия цветов HTML .
display
Этот атрибут определяет способ вывода. Возможные значения:

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

Значение по умолчанию inline .

mode <span title=«Этот устаревший API больше не используется, но, вероятно, все еще работает.»

Устаревшие значение display attribute.
Возможные значения: display (который имеет тот же эффект, как display="block" ) и inline .
overflow
Определяет, как выражение ведет себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.
Возможные значения: linebreak (по умолчанию), scroll, elide, truncate, scale .

Примеры

Представление в HTML5

<!DOCTYPE html>
<html>
  <head>
    <title>MathML in HTML5</title>
  </head>
  <body>

  <math>
    <mrow>
      <mrow>
        <msup>
          <mi>a</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <mo>=</mo>
      <msup>
        <mi>c</mi>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>

  </body>
</html>

Представление в XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>MathML in XHTML</title>
</head>
<body>

  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
      <mrow>
        <msup>
          <mi>a</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <mo>=</mo>
      <msup>
        <mi>c</mi>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>

</body>
</html>

Примечания: XHTML документы с MathML должны быть поданы как application/xhtml+xml. Вы можете легко добиться этого, добавив .xhtml расширение для локальных файлов. Для серверов Apache вы можете настроить .htaccess файл для этого расширения на правильный тип MIME. Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.

Поддержка браузерами

Поддержка браузерами

Полноценные версии

Элемент	Chrome	Firefox (Gecko)	Opera	Safari
XHTML описание	(только 24-я)	1.0 (1.7 и выше)	9.5	5.1
HTML5 описание	(только 24-я)	4.0 (2.0)		5.1
`dir`		12.0 (12.0)
`href`	WebKit bug 85733	7.0 (7.0)		WebKit bug 85733
`mathbackground`	(только 24-я)	4.0 (2.0)		5.1
`mathcolor`	(только 24-я)	4.0 (2.0)		5.1
`overflow`

Мобильные версии

Элемент	Android	Chrome для Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
XHTML описание			1.0 (1.0)
HTML5 описание			4.0 (2.0)
`dir`			12.0 (12.0)
`href`			7.0 (7.0)
`mathbackground`			4.0 (2.0)
`mathcolor`			4.0 (2.0)
`overflow`

Особенности ядра Gecko

В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как <mstyle> элемента). Тем не менее, displaystyle атрибут не отрабатывается. Его поддержка была добавлена в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).

Альтернативные текстовые описания (alttext) или ссылки на альтернативное изображение, (атрибуты altimg, altimg-width, altimg-height и altimg-valign) в настоящее время не реализованы в Gecko.

Cпецификации

Спецификация	Статус	Комментарий
MathML 3.0	Рекомендация	Текущая спецификация
MathML 2.0	Рекомендация	Начальная спецификация

Надеюсь, развитие этого нужного и полезного тэга продолжится.

Смотрите также

Тест браузера на поддержку MathML: здесь или здесь

Источник

Формулы в HTML

HTML-теги, нужные для написания математических формул

Тег	Описание
pre	текст отображается моноширинным шрифтом (одинаковая ширина символов) со всеми пробелами и переносами
sub	текст в виде нижнего индекса
sup	текст в виде верхнего индекса

Специальные символы, нужные для написания математических формул

Символ	Описание	Символ	Описание	Символ	Описание	Символ	Описание
+	−	±	∓	∔
×	умножить	∙	умножить	÷	поделить	∶	соотношение
<	меньше	≤	меньше или равно	>	больше	≥	больше или равно
=	равно	≠	не равно	≈	приблизительно	≅	приблизительно равно
≡	тождественно равно	⇔	равносильно	↔	тогда и только тогда	↦	отображается в
⇒	логическое следование	⇐	обратное логическое следование	→	импликация	←	обратная импликация
~	тильда	≁	не тильда	≋	тройная тильда	ⸯ	вертикальная тильда
∧	и	∨	или	¬	не	∀	для всех
∃	существует	∅	пустое множество	∈	принадлежит из	∉	не принадлежит
⊆	является подмножеством	⊂	строгое включение	⊇	надмножество	⊃	строгое включение
⊊	является собственным подмножеством	⊋	является собственным надмножеством	∪	объединение … и …	⋂	пересечение … и …
ℕ	N	ℤ	Z	ℚ	Q	ℝ	R
ℂ	C	ℍ	H	α	альфа	β	бета
γ	гамма	∞	знак бесконечности	∂		π	число «пи»
%	процент	‰	промилле	∇	опера́тор на́бла	∆	опера́тор Лапла́са
½	одна вторая	⅓	одна третья	⅔	две третьих	¼	одна четвёртая
¾	три четвёртых	⅕	одна пятая	⅖	две пятых	⅗	три пятых
⅘	четыре пятых	⅙	одна шестая	⅚	пять шестых	⅐	одна седьмая
⅛	одна восьмая	⅜	три восьмых	⅝	пять восьмых	⅞	семь восьмых
⅑	одна девятая	⅒	одна десятая	⅟	одна …	↉	ноль третьих
º	верхний индекс «0»	¹	верхний индекс «1»	²	символ в квадрате	³	символ в третей степени
√	квадратный корень	⎷	квадратный корень	∛	кубический корень	∜	корень в четвёртой степени
ƒ	функция	∫	интеграл	∮	контурный интеграл
∏	произведение					∑	сумма
(	круглая скобка	)	круглая скобка	[	квадратная скобка	]	квадратная скобка
{	фигурная скобка	}	фигурная скобка
/	solidus		reverse solidus	\|	вертикальная линия

Высокие скобки:

⎛  ⎞   ⎛  ⎞
⎜  ⎟   ⎝  ⎠
⎝  ⎠

⎡  ⎤   ⎡  ⎤
⎢  ⎥   ⎣  ⎦
⎣  ⎦

⎧  ⎫   ⎧  ⎫   ⎰  ⎱
⎪  ⎪   ⎨  ⎬   ⎱  ⎰
⎨  ⎬   ⎩  ⎭
⎪  ⎪
⎩  ⎭

Высокий интеграл:

⌠
⌡

⌠
⎮
⌡

⌠
⏀
⌡

Высокая сумма:

⎲
⎳

Дробь в HTML

Источник

I want to write some complex mathematical equation in my web page. Is there any plugin or anything for this?

asked Sep 14, 2012 at 20:11

For complex equations, MathJax is the current practical solution. MathML is a more structural approach in principle, but browser support is rather limited and often of questionable quality.

However, complexity is relative. To some people, E = mc² or ∂/∂t + v ⋅ ∇ might be complex, and such constructs can be written fairly well using just HTML with some help from CSS; see my page Math in HTML (and CSS).

answered Sep 15, 2012 at 17:13

Jukka K. KorpelaJukka K. Korpela

193k36 gold badges262 silver badges379 bronze badges

Quick example using mathjax:

Load the cdn: (make sure to specify a ?config= option as it doesn’t come included in the recommended cdn link — default works just fine):

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=default'></script>

Then, inside your html simply wrap the equation inside $$ {equation here} $$

e.g. $$ {J(theta) =frac{1}{2m} [sum^m_{i=1}(h_theta(x^{(i)}) - y^{(i)})2 + lambdasum^n_{j=1}theta^2_j} $$

And it should show up as an equation just fine on the page.

answered Jun 5, 2018 at 4:51

Jared WilberJared Wilber

5,7391 gold badge30 silver badges34 bronze badges

If you don’t want to implement any JavaScript in your HTML, you can use CodeCogs’ equation editor tool (http://www.codecogs.com/latex/about.php).

It’s really easy to use. All you do is use the button interface to write your equation and an HTML image link is immediately generated. When you run your HTML the image will be generated on CodeCogs’ servers and implemented in your site. It’s a very comfortable tool.

twernt

20.2k5 gold badges33 silver badges41 bronze badges

answered Mar 22, 2016 at 13:52

deckeledeckele

4,3331 gold badge18 silver badges24 bronze badges

I know this is a bit late. But would like to mention about jqMath which I have personally found easier and much lightweight than MathJax.

Find the details here : https://mathscribe.com/author/jqmath.html

The files can be downloaded from https://mathscribe.com/downloads/mathscribe-win-0.4.6.zip

To use this,

Unzip the downloaded file
find the files jqmath-etc-0.4.6.min.js and jqmath-0.4.3.css, and include them in your html
Make sure your html have <meta charset="utf-8"> in the <head> section.
Also include jQuery before using these.

Now you can write mathematical equations and formulae in your html or web page.

Visit the above link to know more about how to write mathematical formulae using jqMath.

answered Feb 12, 2018 at 18:24

JishadJishad

1514 silver badges14 bronze badges

You could try this. Kind of out of date so not sure how it’ll work:

http://www.w3.org/Math/

For Firefox, they have a pretty descriptive article on MathML

answered Sep 14, 2012 at 20:15

augaug

10.9k7 gold badges73 silver badges92 bronze badges

You can use KaTeX https://katex.org/.
Just copy and paste the contents in head tag and paste it into your html file.
inside body enter latex inside (latex code here). You can view it on GitHub It is faster than MathJax. I refered from javascript Katex not renderingYou can view it on Github. it works well with major browser below is a example code with autorendering option.

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  <body>
      <p>(x^2 = sqrt{y})</p><br>
      <p style="color:blue;font-size:25px;">(frac {-bpmsqrt{b^2 - 4ac}}{2a})</P>
  </body>
</html>

answered Oct 17, 2020 at 7:10

Источник

Вставка формул в html-документы с помощью разметки MathML

MathML — это приложение XML, используемое для представления математических символов и формул в документах WWW.

Необходимость разметки MathML вызвана тем, что формат HTML, несмотря на множество замечательных свойств, имеет довольно-таки ограниченные возможности передачи математических обозначений. Чаще всего формулы на HTML-страницах представляются в виде графики (растровой или векторной), но этот способ имеет очевидные недостатки. Например, формулу-рисунок практически невозможно отредактировать, а качество ее при печати обычно оставляет желать лучшего. Развитие идей и привело к созданию целого семейства языков математической разметки, к которым относится и MathML. Разработчики осознавали глубину проблематики и поставили цель создать спецификацию, удовлетворяющую следующим ограниченным, но все же достаточно важным требованиям:

ü легкость освоения и ручного набора основных математических обозначений

ü максимальная совместимость с другими математическими форматами, которая должна обеспечиваться соответствующими конвертами

ü возможность вывода формул на различные терминальные устройства

ü поддержка расширяемости, т. е. введения новых символов, схем.

Общий принцип использования MathML состоит в том, что математические конструкции встраиваются в обычный HTML-документ и воспроизводятся при загрузке документа из сети.

Язык MathML предлагает гибкую и расширяемую систему записи математического материала, позволяющую взаимодействовать с внешними программами и осуществлять высококачественное отображение в различных информационных средах. Общий принцип использования MathML состоит во встраивании математических конструкций в XHTML/HTML-документ. Cоздание веб-страниц с использованием MathML возможно тремя способами: HTML + презентационный MathML, XHTML + презентационный MathML, XML + MathML

Для преобразования математических выражений в MathML существует множество утилит. Основными браузерами, непосредственно поддерживающими MathML, являются последние версии Mozilla и его разновидности. Многие другие браузеры поддерживают этот формат при установке соответствующих плагинов. Кроме того, MathML поддерживается основными офисными программами, такими как Microsoft Word и OpenOffice.org, а также математическими программными продуктами например, Mathematica, Maple. MathML— очень мощный и универсальный язык разметки формул. Правда, редактировать формулы (и читать) довольно тяжело. Язык MathML построен по XML-технологии и для задания фрагментов формул используются свои теги.

Пример описания простой формулы

<math>

<mi>x</mi>

<mo>+</mo>

<mn>3</mn>

</math>

Пример 2

<m:math>
  <m:mrow>
    <m:mfrac>
      <m:mrow>
        <m:mi>&8706</m:mi>
        <m:mi>v</m:mi>
      </m:mrow>
      <m:mrow>
        <m:mi>&8706</m:mi>
        <m:mi>x</m:mi>
      </m:mrow>
    </m:mfrac>
    <m:mo>+</m:mo>
    <m:mi>P</m:mi>
    <m:mi>v</m:mi>
    <m:mo>=</m:mo>
    <m:mn>0</m:mn>
  </m:mrow>
</m:math>

а выглядит так:

teg

Вставка формул в html-документы с помощью разметки TeX

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

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

Формулы в LaTeX набираются с помощью специальных команд. Например, формула для нормального распределения в LaTeX будет выглядеть так: frac{1}{sigmasqrt{2pi}}expleft(-frac{(x-mu) ^2}{2sigma^2} right)

а отображаться будет так:

Исходный код математической формулы записывается внутри тега <math>...</math> Пробелы игнорируются (ТеХ их сделает сам). Пустые строки не разрешаются.

Достоинства TEX:

программные реализации TEX есть практически для всех типов компьютеров
низкие требования к аппаратным ресурсам (для работы достаточно IBM PC совместимого компьютера с 286/386 процессором)
переносимость исходных текстов, (результаты форматирования, т.е. конечный вид вашего документа, будет идентичен для все платформ)
при печати получается текст типографского качества,
большое количество бесплатных реализаций
возможность подготовки математических и других формул любой сложности которые будут прекрасно смотреться при печати, затрачивая при этом минимум усилий
расширяемость (на основе имеющихся базовых команд можно создавать свои, более сложные)

Одной из основных функций, заложенных в TeX при его проектировании, была возможность простого набора математических формул.

Набор сложных формул существенно легче и быстрее «визуальных» редакторов (M$ Equation, MathCAD). В особенности это заметно, где требуется выравнивание формул относительно друг друга, расстановка нумерации, а также при использовании нестандартных математических обозначений.

Формулы поддерживаются только в нотации TeX. Пример:

<formula

notation=’TeX’>E=mc^2</formula>

что будет выглядеть так:

tex

Вставка формул в html-документы в виде рисунков

Самый простой способ — вставлять формулы как растровые картинки с помощью тэга img. Изображение формулы может быть получено как вручную (из визуального редактора формул), так и автоматически. Формулы представляются в виде вставных объектов, внедренных в документ. Они могут содержать многоэтажные простые дроби, греческие буквы, матрицы.

Преимущества:

отображаются так же, как и в оригинале во всех браузерах, отображающих картинки

сравнительно легко копируется в документы Office

Недостатки:

самый большой размер страницы с формулами из всех рас смативаемых вариантов

невозможно изменить размер формулы — зачастую она либо слишком мелкая, либо слишком крупная относительно текста либо слишком мелкая, либо слишком крупная относительно текста

плохо смотрится при выводе на печать — не совпадают разрешения

невозможно изменить формулу без её исходного кода и специальной программы

плохо смотрится при выводе на печать — не совпадают разрешения

невозможно изменить формулу без её исходного кода и специальной программы

довольно тяжело отцентровать формулу, находящуюся в тексте

невозможно перенести формулу по словам — разбить на несколько строк при необходимости

Использованная литература.

1. Галактионов В.В. Расширяемый язык разметки XML (Extensible Mark-up Language): промышленный стандарт, определяющий архитектуру программных средств Интернет следующего поколения. Сообщение ОИЯИ, Р10-2000-44, Дубна, 2000.

2. Д. Кнут. «Все про TeX.»

3. http://math.accent.kiev.ua

4. http://www.raleigh.ru/MathML/MathML2/chapter2.html ·

5. www.elbib.ru/index.phtml?page=elbib/rus/journal/2005/

6. http://www.ibb.ru/articles/tex/node3.phtml

Источник

MathMl в HTML5

Теперь, с приходом HTML5, все стало намного проще. В нем появился новый контейнер .
Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.
Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.

Атрибуты тэга

В дополнение к следующим атрибутам, тэг воспринимает любые атрибуты из «> .

class, id, style
При условии использования вместе с таблицами стилей.
dir
Указывает направление формулы: ltr — слева направо или rtl — справа налево.
ref
Используется для установки гиперссылки на указанный URI.
mathbackground
Цвет фона. Вы можете использовать #rgb , #rrggbb и названия цветов HTML .
mathcolor
Цвет текста. Вы можете использовать #rgb , #rrggbb и названия цветов HTML .
display
Этот атрибут определяет способ вывода. Возможные значения:

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

Значение по умолчанию inline .

mode display (который имеет тот же эффект, как display=»block» ) и inline .
overflow
Определяет, как выражение ведет себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.
Возможные значения: linebreak (по умолчанию), scroll , elide , truncate , scale .

Представление в HTML5

Представление в XHTML

Примечания: XHTML документы с MathML должны быть поданы как application/xhtml+xml . Вы можете легко добиться этого, добавив .xhtml расширение для локальных файлов. Для серверов Apache вы можете настроить .htaccess файл для этого расширения на правильный тип MIME. Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.

Поддержка браузерами

Полноценные версии

Элемент	Chrome	Firefox (Gecko)	Internet Explorer	Opera
XHTML описание	(только 24-я)	1.0 (1.7 и выше)	9.5	5.1
HTML5 описание	(только 24-я)	4.0 (2.0)	5.1
dir	12.0 (12.0)
href	WebKit bug 85733	7.0 (7.0)	WebKit bug 85733
mathbackground	(только 24-я)	4.0 (2.0)	5.1
mathcolor	(только 24-я)	4.0 (2.0)	5.1
overflow

Мобильные версии

Элемент	Android	Chrome для Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
XHTML описание	1.0 (1.0)
HTML5 описание	4.0 (2.0)
dir	12.0 (12.0)
href	7.0 (7.0)
mathbackground	4.0 (2.0)
mathcolor	4.0 (2.0)
overflow

В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как «> элемента). Тем не менее, displaystyle атрибут не отрабатывается. Его поддержка была добавлена в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).

Альтернативные текстовые описания ( alttext ) или ссылки на альтернативное изображение, (атрибуты altimg , altimg-width , altimg-height и altimg-valign ) в настоящее время не реализованы в Gecko.

Спецификация	Статус	Комментарий
MathML 3.0	Рекомендация	Текущая спецификация
MathML 2.0	Рекомендация	Начальная спецификация

Надеюсь, развитие этого нужного и полезного тэга продолжится.

Введение в MathML

Основная задача MathML состоит в представлении математической информации в виде, пригодном для ее передачи и обработки в сети Internet, так же как гипертекст позволил подобную функциональность для текстовой, а затем и мультимедийной информации. Мы можем работать в глобальной сети с текстом и картинками, с видео — и аудиопотоками, даже с геолокационными данными! Неужели у нас нет средств для отображения каких-то интегралов и пределов? Конечно есть.

MathML (Mathematical Markup Language) — это XML-язык, первая реализация которого появилась еще в 1998 году и тогда же была рекомендована W3C в качестве стандарта. Хотя история непредставления математической информации в электронном виде началась еще до широкого распространения Интернета. В частности, свои стандарты в этой области предлагали SGML (Standard Generalized Markup Language) и TEX. Предложение о включении HTML Math в прототип HTML 3.0 внес Dave Raggett еще в 1994 году. В ноябре 1995 года команде W3C было выдвинуто предложение о реализации поддержки математики в рамках HTML. В марте 1997 года была первая W3C Math Working Group. Вторая появилась в июле 1998 года, и именно ей удалось добиться стадии рекомендации W3C. Казалось бы, цель была достигнута, но производители браузеров (в отличие от ученых мужей в консорциуме) не очень спешили поддерживать реализацию стандарта, и долгое время MathML существовал и развивался просто как один из XML-языков разметки. И доразвился в октябре 2010 года до версии 3.0, которую в настоящее время мы уже можем использовать для отображения в современных браузерах без дополнительных плагинов.

Что собой на деле представляет MathML-разметка? Примерно вот это:

Результат можно видеть на рис. 116. Впечатляет? Тогда пойдем дальше.

В общем-то, это только одна сторона MathML. Любой человек, знакомый с математикой чуть дальше школьной программы, может понять, что основной проблемой создания языка разметки для математического контента является необходимость одновременно реализовывать представление математической нотации (формы) и содержание представляемых математических идей и объектов. Этот дуализм отражен делением элементов разметки MathML на

Рис. 116. MathML в браузере

Два класса — элементов представления (Presentation MathML) и элементов содержания (Content MathML). Разницу между ними можно продемонстрировать на примере. Запишем хорошо известное со школы квадратное уравнение (ну или квадратный трехчленный полином, как его называют в народе), используя Presentation MathML, а заодно и познакомимся с практикой применения MathML на вебстранице. Сейчас для этого надо совсем немного — просто вставить в нужном месте HTML-контейнер :

Как написать уравнения в html?

Я хочу написать какое-то сложное математическое уравнение на своей веб-странице. Есть ли плагин или что-нибудь для этого?

7 ответов

попробуйте mathjax http://www.mathjax.org/ . Лично я нахожу его очень хорошим.

для сложных уравнений, MathJax является текущим практическим решением. MathML является более структурным подходом в принципе, но поддержка браузера довольно ограничена и часто сомнительного качества.

однако сложность относительна. Для некоторых людей, E = mc2 или ∂/∂t + v ⋅ ∇ может быть сложным, и такие конструкции могут быть написаны довольно хорошо, используя только HTML с некоторыми помощь от CSS; см. мою страницу математика в HTML (и CSS).

вы можете попробовать это. Вид устаревший, поэтому не уверен, как это будет работать:

Если вы не хотите реализовывать JavaScript в своем HTML, вы можете использовать инструмент редактора уравнений CodeCogs (http://www.codecogs.com/latex/about.php).

Это очень простой в использовании. Все, что вы делаете, это использовать интерфейс кнопки, чтобы написать уравнение и ссылка HTML изображение сразу генерируется. При запуске HTML-кода изображение будет сгенерировано на серверах CodeCogs и реализовано на вашем сайте. Это очень удобный инструмент.

пример использования mathjax :

загрузите cdn: (обязательно укажите ?config= опция, поскольку она не входит в рекомендуемая cdn ссылка — default работает просто отлично):

затем внутри вашего html просто оберните уравнение внутри $$ $$

и он должен отображаться как уравнение просто отлично на странице.

Я знаю, что это немного поздно. Но хотелось бы упомянуть о jqMath который я лично нашел проще и намного легче, чем MathJax.

распакуйте загруженный файл
найти файлы jqmath-и т. д.-0.4.6.минута.js и jqmath-0.4.3.в CSS, и включите их в свой html
убедитесь, что ваш html имеет на .
также включают jQuery перед использованием этих.

теперь вы можете писать математические уравнения и формулы в HTML или веб-страницы.

посетите приведенную выше ссылку, чтобы узнать больше о том, как писать математические формулы с помощью jqMath.

Я опаздываю на вечеринку 🙂 Но по соображениям производительности,UpMath просто может быть лучше MathJax. Он использует уценка и латекс для отображения сложных уравнений и формул и даже изображений на основе SVG. Кто-то может захотеть проверить.

источники:

http://html5ru.com/vvedenie-v-mathml.html

http://askdev.ru/q/kak-napisat-uravneniya-v-html-141225/

Источник

Inserting formulas in HTML via the <math> element

The display attribute

Grouping with the <mrow> element

Active learning: nested expressions

Summary

See also

QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

QUICK NOTES

EXAMPLE CODE DOWNLOAD

METHOD 1) HTML SYMBOLS & TAGS

1A) BASIC HTML MATH SYMBOLS

1B) MORE MATH WITH CSS

METHOD 2) MATH LIBRARY

2A) MATH EQUATIONS WITH TEX

2B) MATH EQUATIONS WITH MATHML

METHOD 3) IMAGE EQUATIONS

3A) ONLINE EQUATION EDITORS

3B) LATEX TO IMAGE

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Атрибуты тэга

Представление в HTML5

Представление в XHTML

Поддержка браузерами

Смотрите также

Формулы в HTML

Дробь в HTML

Пример описания простой формулы

MathMl в HTML5

Атрибуты тэга

Представление в HTML5

Представление в XHTML

Поддержка браузерами

Введение в MathML

Как написать уравнения в html?

7 ответов