diff options
Diffstat (limited to 'files/pt-br/web/mathml/element/math/index.html')
| -rw-r--r-- | files/pt-br/web/mathml/element/math/index.html | 299 |
1 files changed, 299 insertions, 0 deletions
diff --git a/files/pt-br/web/mathml/element/math/index.html b/files/pt-br/web/mathml/element/math/index.html new file mode 100644 index 0000000000..b778ed54be --- /dev/null +++ b/files/pt-br/web/mathml/element/math/index.html @@ -0,0 +1,299 @@ +--- +title: <math> +slug: Web/MathML/Element/math +translation_of: Web/MathML/Element/math +--- +<p>{{MathMLRef()}}</p> +<p>The top-level element in MathML is <code><math></code>. Every valid MathML instance must be wrapped in <code><math></code> tags. In addition you must not nest a second <code><math></code> element in another, but you can have an arbitrary number of other child elements in it.</p> +<h2 id="Attributes">Attributes</h2> +<p>In addition to the following attributes, the <code><math></code> element accepts any attributes of the {{ MathMLElement("mstyle") }} element.</p> +<dl> + <dt id="attr-class-id-style"> + class, id, style</dt> + <dd> + Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dt id="attr-dir"> + dir</dt> + <dd> + <span style="display: none;"> </span>Overall directionality of formulas. Possible values are either <code>ltr</code> (left to right) or <code>rtl</code> (right to left).</dd> + <dt id="attr-href"> + href</dt> + <dd> + Used to set a hyperlink to a specified URI.</dd> + <dt id="attr-mathbackground"> + mathbackground</dt> + <dd> + The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dt id="attr-mathcolor"> + mathcolor</dt> + <dd> + The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dt id="attr-display"> + display</dt> + <dd> + This enumerated attribute specifies how the enclosed MathML markup should be rendered. It can have one of the following values: + <ul> + <li><code>block</code>, which means that this element will be displayed outside the current span of text, as a block that can be positioned anywhere without changing the meaning of the text;</li> + <li><code>inline</code>, which means that this element will be displayed inside the current span of text, and cannot be moved out of it without changing the meaning of that text.</li> + </ul> + <p>If not present, its default value is <code>inline</code>.</p> + </dd> + <dt id="attr-mode"> + mode {{ deprecated_inline() }}</dt> + <dd> + Deprecated in favor of the <a href="/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br> + Possible values are: <code>display</code> (which has the same effect as <code>display="block"</code>) and <code>inline</code>.</dd> + <dt id="attr-overflow"> + overflow</dt> + <dd> + Specifies how an expression behaves if it is too long to fit in the allowed width.<br> + Possible values are: <code>linebreak</code> (default), <code>scroll</code>, <code>elide</code>, <code>truncate</code>, <code>scale</code>.</dd> +</dl> +<h2 id="Examples">Examples</h2> +<p><img alt="Theorem of Pythagoras" src="/files/3157/math.jpg"></p> +<h3 id="HTML5_notation">HTML5 notation</h3> +<pre class="brush: html"><!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> +</pre> +<h3 id="XHTML_notation">XHTML notation</h3> +<pre class="brush: xml"><?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></pre> +<p><strong>Notes</strong>: XHTML documents with MathML must be served as <code>application/xhtml+xml</code>. You can achieve that easily by adding the <code>.xhtml</code> extension to your local files. For Apache servers you can <a class="external" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype" title="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">configure your <code>.htaccess</code> file</a> to map extensions to the correct Mime type. Since you notate your MathML in an XML document, also be sure you write a well-formed XML document.</p> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>XHTML notation</td> + <td>{{ CompatNo() }} (24 only)</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>9.5</td> + <td>5.1</td> + </tr> + <tr> + <td>HTML5 notation</td> + <td>{{ CompatNo() }} (24 only)</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>5.1</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("12.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ CompatNo() }} {{webkitbug(85733)}}</td> + <td>{{ CompatGeckoDesktop("7.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }} {{webkitbug(85733)}}</td> + </tr> + <tr> + <td><code>mathbackground</code></td> + <td>{{ CompatNo() }} (24 only)</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>5.1</td> + </tr> + <tr> + <td><code>mathcolor</code></td> + <td>{{ CompatNo() }} (24 only)</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>5.1</td> + </tr> + <tr> + <td><code>overflow</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>XHTML notation</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>HTML5 notation</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("12.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>mathbackground</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>mathcolor</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>overflow</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko-specific_notes">Gecko-specific notes</h3> +<p>Gecko 7.0 {{ geckoRelease("7.0") }} introduced support for accepting all MathML attributes on the top-level math element (i.e. the same behavior as a {{ MathMLElement("mstyle") }} element). However, the <code>displaystyle</code> attribute was not taken into account and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=669719" title="https://bugzilla.mozilla.org/show_bug.cgi?id=669719">has been added</a> in Gecko 8.0 {{ geckoRelease("8.0") }}.</p> +<p>A textual fall-back (<code>alttext</code>) or referring to an alternative image using the attributes <code>altimg</code>, <code>altimg-width</code>, <code>altimg-height</code> or <code>altimg-valign</code> is currently not implemented in Gecko.</p> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('MathML3', 'chapter2.html#interf.toplevel', 'The Top-Level math Element') }}</td> + <td>{{ Spec2('MathML3') }}</td> + <td>Current specification</td> + </tr> + <tr> + <td>{{ SpecName('MathML2', 'chapter7.html#interf.toplevel', 'The Top-Level math Element') }}</td> + <td>{{ Spec2('MathML2') }}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> +<h2 id="See_also">See also</h2> +<ul> + <li>HTML top-level element: {{ HTMLElement("html") }}</li> + <li>SVG top-level element: {{ SVGElement("svg") }}</li> + <li>MathML browser test: For <a class="link-https" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> and <a class="link-https" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></li> +</ul> |