diff options
Diffstat (limited to 'devdocs/html/element%2Fpre.html')
| -rw-r--r-- | devdocs/html/element%2Fpre.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fpre.html b/devdocs/html/element%2Fpre.html new file mode 100644 index 00000000..d3143640 --- /dev/null +++ b/devdocs/html/element%2Fpre.html @@ -0,0 +1,183 @@ +<header><h1><pre>: The Preformatted Text element</h1></header><div class="section-content"><p>The <code><pre></code> <a href="../index">HTML</a> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or <a href="https://en.wikipedia.org/wiki/Monospaced_font" target="_blank">monospaced</a>, font. Whitespace inside this element is displayed as written.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/pre.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>If you have to display reserved characters such as <code><</code>, <code>></code>, <code>&</code>, and <code>"</code> within the <code><pre></code> tag, the characters must be escaped using their respective <a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity">HTML entity</a>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element only includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cols"> +<a href="#cols"><code>cols</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of <a href="#width"><code>width</code></a>. To achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> instead.</p> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> instead.</p> </dd> <dt id="wrap"> +<a href="#wrap"><code>wrap</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a> instead.</p> </dd> </dl> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.</p> <p>People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.</p> <p>A combination of the <a href="figure"><code><figure></code></a> and <a href="figcaption"><code><figcaption></code></a> elements, supplemented by the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> attributes on the <code>pre</code> element allow the preformatted <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> art to be announced as an image with alternative text, and the <code>figcaption</code> serving as the image's caption.</p> +</div> +<h3 id="example">Example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="B5YQB9OgIEPWVPXxsTuXL2miUqASlopw2LLCKbutcpc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ASCII COW<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + ___________________________ + <span class="token entity named-entity">&lt;</span> I'm an expert in my field. <span class="token entity named-entity">&gt;</span> + --------------------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cow-caption<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + A cow saying, "I'm an expert in my field." The cow is illustrated using + preformatted text characters. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%E2%80%94_providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html" target="_blank">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> </ul> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iIQd1jZopQJdpu+WHzSH6n5jyMjDI5+WBXiveyKwjEk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using CSS to change the font color is easy.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> +body { + color: red; +} +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/pre/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="escaping_reserved_characters">Escaping reserved characters</h3> +<div class="section-content"> +<h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="6tKQNA302zYigID+/jL3rLMNftHbaURc1QMq1nXNeOc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> +let i = 5; + +if (i <span class="token entity named-entity">&lt;</span> 10 <span class="token entity named-entity">&amp;</span><span class="token entity named-entity">&amp;</span> i <span class="token entity named-entity">&gt;</span> 0) + return <span class="token entity named-entity">&quot;</span>Single Digit Number<span class="token entity named-entity">&quot;</span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Escaping reserved characters sample" id="frame_escaping_reserved_characters" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/pre/runner.html?id=escaping_reserved_characters" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLPreElement"><code>HTMLPreElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element">HTML Standard <br><small># the-pre-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>pre</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>cols</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">1–29</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">4–29</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>width</code></th> +<td class="bc-supports-yes"><details><summary>1</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>1</summary>Since Firefox 29, specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>15</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>3</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>4</summary>Since Firefox 29, specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>14</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>2</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +</tr> +<tr> +<th><code>wrap</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>CSS: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break"><code>word-break</code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity">HTML Entity</a></li> <li>Related element: <a href="code"><code><code></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre</a> + </p> +</div> |