diff options
Diffstat (limited to 'files/pt-br/web/css/text-transform/index.html')
| -rw-r--r-- | files/pt-br/web/css/text-transform/index.html | 307 |
1 files changed, 307 insertions, 0 deletions
diff --git a/files/pt-br/web/css/text-transform/index.html b/files/pt-br/web/css/text-transform/index.html new file mode 100644 index 0000000000..a32cc3fa2f --- /dev/null +++ b/files/pt-br/web/css/text-transform/index.html @@ -0,0 +1,307 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +translation_of: Web/CSS/text-transform +--- +<div>{{CSSRef}}</div> + +<p>A propriedade de CSS <strong><code>text-transform</code></strong> especifica como capitalizar um texto de um elemento. Pode ser usado para que o texto apareça com todas as letras maiúsculas ou todas minúsculas, ou com cada palavra em maiúscula.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +text-transform: capitalize; +text-transform: uppercase; +text-transform: lowercase; +text-transform: none; +text-transform: full-width; + +/* Global values */ +text-transform: inherit; +text-transform: initial; +text-transform: unset; +</pre> + +<p>The <code>text-transform</code> property takes into account language-specific case mapping rules, like:</p> + +<ul> + <li> + <p>in Turkic languages, like Turkish (<code>tr</code>), Azerbaijani (<code>az</code>), Crimean Tatar (<code>crh</code>), Volga Tatar (<code>tt</code>), and Bashkir (<code>ba</code>), there are two kinds of i, with and without the dot, and two case pairings: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</p> + </li> + <li> + <p>In German (<code>de</code>), the <code>ß</code> becomes <code>SS</code> in uppercase.</p> + </li> + <li> + <p>In Dutch (<code>nl</code>), the <code>ij</code> digraph becomes <code>IJ</code>, even with <code>text-transform: capitalize</code>, which only put the first letter of a word in uppercase.</p> + </li> + <li> + <p>In Greek (<code>el</code>), vowels lose their accent when the whole word is in uppercase (<code>ά</code>/<code>Α</code>), except for the disjunctive <span lang="el">eta</span> (<code>ή</code>/<code>Ή</code>). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (<code>άι</code>/<code>ΑΪ</code>).</p> + </li> + <li> + <p>In Greek (<code>el</code>), the lowercase sigma character has two forms: <code>σ</code> and <code>ς</code>. <code>ς</code> is used only when sigma terminates a word. When applying <code>text-transform: lowercase</code> to an uppercase sigma (<code>Σ</code>), the browser needs to choose the right lowercase form based on context.</p> + </li> + <li>in Irish (<code>ga</code>), certain prefixed letters remain in lowercase when the base initial is capitalised, so for example <code>text-transform: uppercase</code> will change <code>ar aon tslí</code> to <code>AR AON tSLÍ</code> and not, as one might expect, <code>AR AON TSLÍ </code>(Firefox only). In some cases, a hyphen is also removed upon uppercasing: <code>an t-uisce</code> transforms to <code>AN tUISCE </code>(and the hyphen is correctly reinserted by <code>text-transform: lowercase</code>)</li> +</ul> + +<p>The language is defined by the <code>lang</code> HTML attribute or the <code>xml:lang</code> XML attribute.</p> + +<p>Support for these specific cases vary from one browser to the other, so check the <a href="#Browser_compatibility">browser compatibility table</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<dl> + <dt><code>capitalize</code></dt> + <dd> + <p>Is a keyword forcing the first <em>letter</em> of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general categories {{experimental_inline}} : it excludes any punctuation marks or symbols at the beginning of the word.</p> + + <div class="note">Authors should not expect <code class="css">capitalize</code> to follow language-specific title casing conventions (such as skipping articles in English).</div> + + <div class="note">The <code>capitalize</code> keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like <code>ⓐ</code> to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The <code>capitalize</code> line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.</div> + </dd> + <dt><code>uppercase</code></dt> + <dd>Is a keyword forcing all characters to be converted to uppercase.</dd> + <dt><code>lowercase</code></dt> + <dd>Is a keyword forcing all characters to be converted to lowercase.</dd> + <dt><code>none</code></dt> + <dd>Is a keyword preventing the case of all characters to be changed.</dd> + <dt><code>full-width</code> {{experimental_inline}}</dt> + <dd>Is a keyword forcing the writing of a character — mainly ideograms and latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).</dd> + +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="none" name="none"><code>none</code></h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: none + <strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong> +</p> +</pre> + +<pre class="brush: css">span { + text-transform: none; +} +strong { float: right; }</pre> + +<p>This demonstrates no text transformation.</p> + +<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> + +<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: capitalize +<code> <strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demonstrates text capitalization.</p> + +<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Punctuation)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.</p> + +<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Symbols)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.</p> + +<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (Dutch <em>ij</em> digraph)</h3> + +<pre class="brush: html"><p>Initial String + <strong lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>This demonstrates how the Dutch <em>ij</em> digraph must be handled like one single letter.</p> + +<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p> + +<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>This demonstrates transforming the text to uppercase.</p> + +<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p> + +<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Greek Vowels)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>This demonstrates how Greek vowels except disjunctive <em>eta</em> should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.</p> + +<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p> + +<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>This demonstrates transforming the text to lowercase.</p> + +<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p> + +<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Greek Σ)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>This demonstrates how the Greek character sigma (<code>Σ</code>) is transformed into the regular lowercase sigma (<code>σ</code>) or the word-final variant (<code>ς</code>), according the context.</p> + +<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p> + +<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong> +</p></code> +<p>text-transform: full-width + <code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: full-width; +} +strong { width: 100%; float: right; }</pre> + +<p>Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.</p> + +<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p> + +<h2 id="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('CSS4 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>From {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, adds the <code>full-size-kana</code> keyword and allows the <code>full-width</code> keyword to be used together with another keyword.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>From {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, extends letters to any Unicode character in the Number or Letter general category. Modifies the behavior of <code>capitalize</code> to apply to the first letter of the word, ignoring initial punctuations or symbols. Adds the <code>full-width</code> keyword to mix smoothly ideographic characters and alphabetical characters.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>From {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extends letters to non-latin bi-cameral scripts</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.text-transform")}}</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("font-variant")}}</li> +</ul> |