{"id":3690,"date":"2017-06-01T14:53:06","date_gmt":"2017-06-01T12:53:06","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=3690"},"modified":"2020-02-09T10:59:50","modified_gmt":"2020-02-09T09:59:50","slug":"right-to-left-languages-css","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/right-to-left-languages-css-3690\/","title":{"rendered":"Adapt CSS for right-to-left languages with Gulp"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If a website is displayed in a language which goes from right to left, we need to modify a few CSS rules if the CSS was written for left-to-right languages \u2014 for example, we would need to adjust left and right spaces and flip floats. We could make these Adjustments manually, but that can be time-consuming. With the help of Gulp, it is easier and faster.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Until now, I released a few WordPress themes but did not think about right-to-left-text. I changed this for the almost-ready Theme and searched for an easy solution to modify the CSS rules. I am using Gulp, so I quickly found the plugin <a href=\"https:\/\/www.npmjs.com\/package\/gulp-css-flipper\">gulp-css-flipper<\/a>, which does the task.&nbsp; The important part of my <code class=\"lang-markup\">gulpfile.js<\/code> looks like that:<\/p>\n\n\n<pre class=\"wp-block-code lang-javascript\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> gulp = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'gulp'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> rename = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'gulp-rename'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> flipper = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'gulp-css-flipper'<\/span>);\n\ngulp.task(<span class=\"hljs-string\">'css-rtl'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\t<span class=\"hljs-keyword\">return<\/span> gulp.src(&#91;<span class=\"hljs-string\">'assets\/css\/*.css'<\/span>, <span class=\"hljs-string\">'!assets\/css\/*-rtl.css'<\/span>])\n\t\t.pipe(flipper())\n\t\t.pipe(rename(\n\t\t\t{<span class=\"hljs-attr\">suffix<\/span>: <span class=\"hljs-string\">\"-rtl\"<\/span>}\n\t\t))\n\t\t.pipe(gulp.dest(<span class=\"hljs-string\">'assets\/css\/'<\/span>));\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The task fetches the CSS files from <code class=\"lang-markup\">assets\/css<\/code> (except the files ending on <code class=\"lang-markup\">-rtl.css<\/code>), runs the plugin, adds a <code class=\"lang-markup\">-rtl<\/code> suffix and saves the new files into the same directory.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, the flipper is not intelligent. It cannot check if a rule should not be flipped because of any circumstances, so you better check the result. You can exclude specific rules or blocks of rules from the flipper with adding a <code class=\"lang-css\">\/*@noflip*\/<\/code> comment before the rule or the selector (for a whole rule block). <a href=\"https:\/\/github.com\/twitter\/css-flip\">You can find the plugin documentation on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If a website is displayed in a language which goes from right to left, we need to modify a few CSS rules if the CSS was written for left-to-right languages \u2014 for example, we would need to adjust left and right spaces and flip floats. We could make these Adjustments manually, but that can be [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":null,"server":null,"url":null},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3690"}],"version-history":[{"count":2,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3690\/revisions"}],"predecessor-version":[{"id":5884,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3690\/revisions\/5884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media\/3691"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}