{"id":144460,"date":"2013-07-24T19:35:21","date_gmt":"2013-07-25T02:35:21","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=144460"},"modified":"2015-02-04T09:33:16","modified_gmt":"2015-02-04T16:33:16","slug":"text-transform","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-transform\/","title":{"rendered":"text-transform"},"content":{"rendered":"<p>The <code>text-transform<\/code> property in CSS controls text case and capitalization. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.lowercase {\r\n  text-transform: lowercase;\r\n  }<\/code><\/pre>\n<h3>Text-Transform Values<\/h3>\n<ul>\n<li><code>lowercase<\/code> makes all of the letters in the selected text lowercase.<\/li>\n<li><code>uppercase<\/code> makes all of the letters in the selected text uppercase.<\/li>\n<li><code>capitalize<\/code> capitalizes the first letter of each word in the selected text. <\/li>\n<li><code>none<\/code> leaves the text&#8217;s case and capitalization exactly as it was entered.<\/li>\n<li><code>inherit<\/code> gives the text the case and capitalization of its parent.<\/li>\n<\/ul>\n<p>The demo below shows <code>lowercase<\/code>, <code>uppercase<\/code>, and <code>capitalize<\/code> in use. Take a look at the HTML tab to see how the text was originally written, then switch back to the results tab to see it after the CSS is applied.<\/p>\n<p data-height=\"268\" style=\"height: 268px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"0f4293fce0d14aafc3818c950ab0ded3\" data-default-tab=\"result\" data-user=\"mariemosley\" class='codepen'>See the Pen <a href=https://css-tricks.com/"http:////codepen.io//mariemosley//pen//0f4293fce0d14aafc3818c950ab0ded3///" rel=\"noopener\">0f4293fce0d14aafc3818c950ab0ded3<\/a> by mariemosley (<a href=https://css-tricks.com/"http:////codepen.io//mariemosley/" rel=\"noopener\">@mariemosley<\/a>) on <a href=https://css-tricks.com/"http:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Points of Interest<\/h3>\n<p><code>capitalize<\/code> will capitalize words that appear inside single or double quotes, and the first letter after a hyphen. It won&#8217;t capitalize the first letter after a number, so dates like &#8220;February 4th, 2015&#8221; won&#8217;t transform into &#8220;February 4Th, 2015&#8221;.<\/p>\n<p><code>capitalize<\/code> only affects the first letters of words. It will not change the case of the rest of the letters in a word. For example, if you <code>capitalize<\/code> a word that&#8217;s in all capital letters already, the other letters in the word won&#8217;t switch to lowercase. This is nice when your text includes an acronym or abbreviation that shouldn&#8217;t include any lowercase letters.<\/p>\n<p>CSS can&#8217;t do &#8220;title case&#8221;, the capitalization style used in titles of books, movies, songs, and poems, where articles are lowercase (as in &#8220;Raiders of the Lost Ark&#8221;). But, there are JavaScript solutions for title case, including David Gouch&#8217;s <a href=https://css-tricks.com/"http:////individed.com//code//to-title-case///" rel=\"noopener\">toTitleCase()<\/a>.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//f//font-variant///">font-variant<\/a><\/li>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-indent///">text-indent<\/a><\/li>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//selectors//f//first-letter///">::first-letter<\/a><\/li>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//selectors//f//first-line///">::first-line<\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//text-transform/" rel=\"noopener\">text-transform at MDN<\/a><\/li>\n<li><a href=https://css-tricks.com/"http:////www.w3.org//TR//CSS21//text.html#propdef-text-transform\" rel=\"noopener\">text-transform in the W3C Spec<\/a><\/li>\n<li><a href=https://css-tricks.com/"http:////webaim.org//techniques//fonts//#caps\" rel=\"noopener\">Notes on the accessibility of uppercase text from WebAIM<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Firefox supports language-specific capitalization rules for Turkic languages, German, Dutch, and Greek that are not supported by other browsers. Firefox is also the only browser that supports <code>text-transform: full-width;<\/code>, which can help improve the readability of text that includes a mixture of latin and East Asian scripts. <a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//text-transform/" rel=\"noopener\">See details at MDN<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The text-transform property in CSS controls text case and capitalization. .lowercase { text-transform: lowercase; } Text-Transform Values lowercase makes all [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/144460"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=144460"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/144460\/revisions"}],"predecessor-version":[{"id":195092,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/144460\/revisions\/195092"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=144460"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=144460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}