[{"data":1,"prerenderedAt":222},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-how-to-multilingual-website-rtl-html-css-i18n-slugs":134,"language-blog-slug-en-how-to-multilingual-website-rtl-html-css":141},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","how-to-multilingual-website-rtl-html-css",{"locale":139,"value":140},"nl","how-to-meertalige-website-rtl-html-css",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":151,"subtitle":79,"isArchived":152,"headerIllustration":153,"date":158,"authors":159,"introTitle":168,"items":169,"pivots":207,"relatedBlogPosts":220,"tags":221,"onMountedScript":162,"onUnmountedScript":162},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"How to: Make your multilingual website suitable for RTL","Making a multilingual website? Here are 3 knowledgeable things to make your website suitable for RTL and LTR languages with just HTML and CSS!",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1655109732-schermafbeelding-2022-06-13-om-10-40-39.png","How to make your multilingual website suitable for RTL with only HTML and CSS",false,{"url":154,"alt":155,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1655104054-multilingual.svg",null,581,365,"2022-06-13T02:00:00.000+02:00",[160],{"name":161,"lastName":162,"slug":163,"image":164},"Declan","","declan",{"url":165,"alt":155,"width":166,"height":167},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Arabic, Hebrew and Persian are the most widespread Right to Left writing systems these days. When you’re making a multilingual website, where you want to combine LTR languages with RTL languages, there are some things you have to know.",[170,174,178,183,186,190,194,197,200,204],{"__typename":171,"id":172,"title":162,"body":173},"TextSectionRecord","JXmazqJgRSyjZ7KxJ0eaLQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">You might think it’s complicated, but it’s quite easy to apply. It’s actually a gifted standard in HTML and CSS. That’s something we love about the web. No need for extra plugins. So use this knowledge to your advantage. Without further ado, here are 3 knowledgeable things to make your \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fcustom-website-development\u002F\" title=\"multilingual website\">multilingual website\u003C\u002Fa> suitable for RTL and LTR.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":171,"id":175,"title":176,"body":177},"CwTiG1B-TH-JGRyPxHhzbA","1. Define the text direction on your website","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Same as you can define a language, you’re able to define a text direction on your website. Using the \u003Ccode>dir\u003C\u002Fcode> attribute to set the base direction of text for display. When the language on your website is like English, Spanish or Dutch use dir=”ltr”. When it’s written in Arabic, Hebrew or Persian use dir=”rtl”.  \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":180,"language":181,"body":182},"CodeBlockRecord","V7uhCGdMRruF0ODvmSj45Q","html","\u003Chtml lang=”ar-MA” dir=”rtl”>",{"__typename":171,"id":184,"title":162,"body":185},"dGUbFG-ZQdy-1bBnv-p9aA","\u003Cp>\u003Cspan style=\"font-weight: 400;\">There is also a CSS property called \u003Ccode>direction\u003C\u002Fcode> which has the same effect as the \u003Ccode>dir\u003C\u002Fcode> attribute. I would recommend the dir attribute, because it has an implicit semantic value since the order of elements change when the text direction changes. Both the HTML attribute and the CSS property cascade down and can be overwritten at a lower level.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":171,"id":187,"title":188,"body":189},"IUJ2Tsk6RSOOSG_3X7Tg5g","2. Use CSS logical properties","\u003Cp>\u003Cspan style=\"font-weight: 400;\">When you’re changing your website from LTR to RTL some objects may lose the margins or paddings you defined. All CSS properties with left or right in them, need to be switched to the other side. In the old days we needed to do something like this:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":191,"language":192,"body":193},"KIteQN5VSf6JczX3o7mHtQ","css",".absolute-element {\n  position: absolute;\n}\n\n[dir=\"rtl\"] .absolute-element {\n  right: 50px;\n}\n\n[dir=\"ltr\"] .absolute-element {\n  left: 50px;\n}",{"__typename":171,"id":195,"title":162,"body":196},"c18oC2nqQcuc9UB_k_gPpA","\u003Cp>\u003Cspan style=\"font-weight: 400;\">But nowadays CSS logical operators can help you solve most problems.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">You can use \u003Ccode>inline\u003C\u002Fcode> for the axis on which the text is flowing and \u003Ccode>block\u003C\u002Fcode> for the axis at the right angle of the one on which the text is flowing.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">I recommend you start using ‘inline’ instead of, left\u002Fright, ‘block’ instead of top\u002Fbottom, ‘start’ instead of \u003Ccode>top\u003C\u002Fcode> and \u003Ccode>end\u003C\u002Fcode> instead of \u003Ccode>bottom\u003C\u002Fcode> (reasoning from LTR languages). This way supporting different text directions will come naturally.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">If you want to support top-to-bottom languages as well you might even want to reconsider using \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode> and use \u003Ccode>inline-size\u003C\u002Fcode> instead of \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>block-size\u003C\u002Fcode> instead of \u003Ccode>height\u003C\u002Fcode>. These CSS properties will adhere to the CSS \u003Ccode>writing-mode\u003C\u002Fcode> property.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"css-901oao css-16my406 css-bfa6kz r-poiln3 r-bcqeeo r-qvutc0\">\u003Cspan class=\"css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0\">TIL: \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fblvdmitry\u002Fstatus\u002F1536288797075329025\" target=\"_blank\" rel=\"noopener\">Dmitry Belyaev pointed out to me on Twitter\u003C\u002Fa> that there are also logical properties for \u003Cspan style=\"font-weight: 400;\">absolute, relative, fixed or sticky elements. So \u003Ccode>left\u003C\u002Fcode> becomes \u003Ccode>\u003Cspan>inset-inline-start\u003C\u002Fspan>\u003C\u002Fcode>, \u003Ccode>right\u003C\u002Fcode> becomes \u003Cspan>\u003Ccode>inset-inline-end\u003C\u002Fcode>, \u003Ccode>top\u003C\u002Fcode> becomes \u003Ccode>inset-block-start\u003C\u002Fcode> and \u003Ccode>bottom\u003C\u002Fcode> becomes \u003Ccode>inset-block-end\u003C\u002Fcode>.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Here are some examples to illustrate further:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":198,"language":192,"body":199},"AevicowKRYqMLF4Wq8JxJg","border-block-start: 10px;     \t\u002F\u002F border-top: 10px;\npadding-inline-end: 10px;     \t\u002F\u002F padding-right: 10px;\nmargin-block-start: 10px;      \t\u002F\u002F margin-top: 10px;\ntext-align: start;            \t\u002F\u002F text-align: left;\ninline-size: 100px;            \t\u002F\u002F width: 100px;\nmax-block-size: 100px;         \t\u002F\u002F max-height: 100px;",{"__typename":171,"id":201,"title":202,"body":203},"RQqBb26wSuOv4f3IJFuJkg","3. Give unicode ranges to fonts","\u003Cp>\u003Cspan style=\"font-weight: 400;\">The font you picked for your website might not be suitable for all languages. You can define unicode ranges to set the specific range of characters to use from a font defined by \u003Ccode>@font-face\u003C\u002Fcode>. By doing so, you make sure the font is only loaded when a character on the screen is within that specific unicode range. See below an example of rendering Arabic characters in a different font than Latin characters:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":205,"language":192,"body":206},"Xv0Q4175RGy3WVOR9RtG-g","@font-face {\n  font-family: \"My Latin Font\";\n  src: url(\"MyLatinFont.woff2\") format(\"woff2-variations\"),\n       url(\"MyLatinFont.woff2\") format(\"woff2\"),\n       url(\"MyLatinFont.woff\") format(\"woff\");\n  unicode-range: U+0000-007F; \u002F\u002F Latin\n}\n\n@font-face {\n  font-family: \"My Arabic Font\";\n  src: url(\"MyArabicFont.woff2\") format(\"woff2-variations\"),\n       url(\"MyArabicFont.woff2\") format(\"woff2\"),\n       url(\"MyArabicFont.woff\") format(\"woff\");\n  unicode-range: U+0600-06FF; \u002F\u002F Arabic\n}",[208],{"title":209,"body":210,"links":211,"mailchimpValue":162,"mailchimpName":162,"mailchimpId":162,"formType":212,"contactPerson":213},"Need help with your multilingual website?","\u003Cp>We're happy to help!\u003C\u002Fp>\n",[],"contact",{"name":214,"lastName":162,"jobTitle":215,"image":216},"Jasper","CTO, Co-founder",{"url":217,"alt":155,"width":218,"height":219},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[],[],1776256143085]