{"id":2190,"date":"2017-01-25T00:13:50","date_gmt":"2017-01-25T00:13:50","guid":{"rendered":"http:\/\/cssreset.com\/?p=2190"},"modified":"2017-01-23T00:15:59","modified_gmt":"2017-01-23T00:15:59","slug":"change-the-direction-of-your-text-with-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/change-the-direction-of-your-text-with-css\/","title":{"rendered":"Change the Direction of Your Text with CSS"},"content":{"rendered":"<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 13.0px}\nspan.s1 {font-kerning: none}\nspan.Apple-tab-span {white-space:pre}\n--><\/style>\n<p>CSS has a little known direction property that will actually change the direction of your text from the default (left to right) to a more unorthodox right to left. The property, called direction, only takes two values: ltr (left to right) and rtl (right to left). Here\u2019s how you would use it in your CSS:<\/p>\n<pre>p{\r\ndirection: rtl;\r\n}<\/pre>\n<p>To see how it actually changes your text, check out the example below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-2191\" alt=\"Screen Shot 2017-01-23 at 11.19.57 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.19.57-AM-1024x148.png\" width=\"1024\" height=\"148\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.19.57-AM-1024x148.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.19.57-AM-300x43.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.19.57-AM-180x26.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.19.57-AM.png 1170w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>As you can see, the second line of text is aligned right to left. The code doesn\u2019t flip the letters around or anything like that, but you may have noticed that it does put the punctuation on left side of the text, rather than the right, as well as aligning the text to the right side of the container. This property might not have a lot of practical use, but it\u2019s definitely a cool tool to have in your back pocket just in case the need to use it may arise.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS has a little known direction property that will actually change the direction of your text from the default (left to right) to a more unorthodox right to left. The property, called direction, only takes two values: ltr (left to [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/change-the-direction-of-your-text-with-css\/\" title=\"Click to read 'Change the Direction of Your Text with CSS'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2191,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2190"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2190"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2190\/revisions"}],"predecessor-version":[{"id":2193,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2190\/revisions\/2193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2191"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}