RTL Languages in Web Design: Chapter 1

Hi – so I’ve been thinking about doing a seriesof videos about right-to-left in web design – the basics of right to left languages, how they affectweb design, and if you are a coder – getting more involved into how strings labour, howdifferent text editors act, clearing up some flusters that you’ll likely have if youcome to this from another language background. First thing before I get too deep into it – thisis a very brief overview of numerou communications and cultures. I made one Arabic class, and my mainexperience has been helping open informant projects reinforcement Arabic and other right-to-left languagesin their apps, and I learned a lot from other persons and I learned a great deal from presenting friends, like,’ hey, does this look right to you ?’ and read what those provides are, soI’m coming to this from[ the] attitude of very much an outsider.But i hope also if youare a native talker, and you’re taking a web design course with a standard curriculum, I hopethat you can learn a lot about what establisheds you can use to support your own language. I think it’sgood to get this information out there either way, whether you’re an stranger or part of one of thesetraditions. So, first off, where do right to left speeches come from? What’s the likelihood thatyou’re going to have to support it? Well, there are tons of parties around the world that live indifferent countries – there’s no way to say that simply beings in certain countries speak certainlanguages because people have moved everywhere. But in terms of right-to-left conversations, thereare three major regions where those speeches have has been derived from, and are extremely popular, andare the normal way of communication.One of them is the Middle East, Southwest Asia, North Africawhere the Arabic script is used in Arabic, in Persian/ Farsi, Pashto, Dari expressions. And Hebrewbeing an example of it’s spoken and written in Israel, but too around the world whereverit’s part of the Jewish tradition to use that. Then in the Indian Ocean there’s Dhivehi usedin the Maldives, and then in Western africa, even in the 20 th century therehave been brand-new writing structures that have come up and been inspired by other rightto left languages to write in that counseling. So here’s a ordinary essay snippet from the Arabic Wikipedia, and right to left text really makes, you have[ some text] and everything is formatted as you’re coming in from the claim, so you wouldread the headline commencing from the hotshot and extending left, and then you go to the next course, andthen you go to the next cable. One thing that’s interesting about this is that amounts which – ifyou’re familiar with Latin wrote you know that we call them Arabic symbols, because they camethrough the Arabic world before they came to be used in the Roman Empire and such, I don’t knowthe whole record of this – but the most important thing is digits are spoken the same way that you would readthe numbers in English.This is 48 this is 122. This is 99 this is 49. So this sentence is Ithink saying something like, from 49 to 99, and you time need to know that the words are arewritten and speak from title to left, the numbers how you see them are left to right, so it’s a little bit complex when you first see it. Then for a whole web page, if you zoomout of it and look at the Hebrew Wikipedia, commencing from the right side, you have the logoyou have the sidebar with all the menu alternatives. If you have a search bar there’s gonna be sometext and there’s gonna be the search bar on the left. And then on the far left you’ll havethe username, sign in, those kinds of implements. So[ in a] method it gets started as a ended mirrorimage of the layout of your original website. And then for a menu part like this, there’s theimage and there’s the verse, idol and the textbook, so the layout has flip-flop to support the flow of thelanguage. I think this is why it’s so important to have this line because if I’m translating anEnglish website into Spanish, I modify the words on some buttons, I question some people locally doesthis make sense, is this culturally appropriate, but for this there’s a entire other CSSlayout that you’re going to have to be fully accommodating.There are definitelypeople that don’t do this and go around it, but this is a best practices talk, so we’re going to recommend that. For graphs, these[ right-to-left planneds] do exist, I follow an account called Arab Barometer which has a lot of differentcharts and tends to have right to left bar charts. This is a particularly interesting scatterplot that has the source in the bottom right. But this is not at all involved, I thinkit’s less common to see – it’s more common to see someone put together something inExcel and placed the labels in their language and not go through this process of figuringout, how do I procreate the bar chart look like this. Line shows are almost universally left to right, because epoch flowing left to right is standard if you watch a YouTube video in an Arabic webpage, the video[ term cursor] is going to go left to right. This could also affect some differentvideos and graphics. I’m going to quickly switch over to this one this is a Dhivehivideo from the Maldives,[ UNDP] Maldives. So there’s an interesting living, okay, they have a little animation here too. Yeah so you can imagine, if you have an animation in English and have maybe dropped in otherlanguages[ before ]… First if you’re using Adobe software, you have to double checkthat your dialogue is showing up correctly, there are some different issues beings have hadwith that, but furthermore, you might have to think about, oh it’s not going to sweep out left toright and be done, you might[ wishing] to render the living in the other direction, or asign might show up in another direction, so there’s whole things about graphic designin left to right and right to left speeches, or even in shared environments like bi-directionaltext, but that’s more of a blueprint conference. I crave this to be really intro-level stuff.If you’re coming to this as a programmer, you’ve done substance with fibres before, so “hello”+ “! ” equals “hello! “. Now if you have the textbook’ assalamu alaikum’+ “! “, you might be wonderingwait wait, does the ejaculation object go at this end or the other end, like I’m reading rightto left, but the string in this, what’s going on? So what really cured me out is, more than fiveyears ago, I had a conversation with Ramsey Nasser on Twitter, and he made an Arabic programminglanguage […] everything was in Arabic – and he generated this advice, that instead you justneed to think about it in first-to-last order, so what does that mean? If youhave this string “al-salaam”, then “ve been thinking about” it, perhaps, you construe on the righthere, there’s the first word, second character, third character, there’s this firstly to previous say tothis.And you can browse them[ in the fibre] just by looking at a[ 0 ], at a[ -1 ], but youcan just browse people in the cord and you can see that the first and last, are as they[ “wouldve been”] read by a person. To double down on this first-to-last thing, is anticipated that I give you a string, and then say+ ” 2021 “, and I question,’ what’s the zerothcharacter of the cord ?’ This isn’t a trick question, you’d say oh it’s the zeroth characterof that thing that you added in the start. And say’ what’s the last attribute of thestring ?’ you would say oh it’s’ 1′ from’ 2021 ‘. If I say split it along that room, and thereare no spaces in the first part, you would say, oh yeah, the first[ half] is what you added, and the[ second half] is “2 021 “. And even though that string that I gave you is an Arabicstring that appears like this, and the zeroth note is’ s’ – this is’ sana’ for time – eventhough I’m sending you this right-to-left text, you can’t really think about it that way rightnow, because the text interpreting will handle it later.So even though they are it appears on the page/ thebrowser in this particular order, at the end everything that we talkedabout before is still genuine. You can think about it as blocking it outor, I’ll show you later, you can get it from your localization library, where it can be betterconfigured. But yeah let me show you – this isn’t so clear-cut if you’re using the JavaScriptconsole. So here I have’ al-salam alaikum’ written in Google Docs. And in theJavaScript console[ we’ll] say hello= this, hello+ “nick”+ “! “. And it’s interpreted it in avery strange way in the JavaScript console where it’s literally in the orderthat things are entered: hello, gouge, an utterance degree. But if Iwere to copy this textbook and glue it into a text interpreting app like Google Docs, it rendersit differently – I conceive precisely – in this sense because this comes first. If you weresaying it, you would say,’ assalamu alaikum’ and then !. The JavaScript console andprobably your own IDE are not designed to make this any easier.I am so be applicable to havingproblems where I say, you are familiar with,’ why don’t I only drop it into the Chrome JS console and seewhat it says ?’ and that’s not certainly going to help you if you’re a little confused the orderor how things are going to appear on the sheet. Like I said before, what I visualize might beeasiest is if you have internationalization and localization/ translation file somewherewhere it says hello in this language is this, and this communication is this. And in your code you’rejust writing hello, gazing up its own language, and then exclamation point, and whicheverlanguage it is, it’ll pull it out of there, and you won’t have anything in your root codethat disorients you about which comes first or last. In some occasions, I know in my IDE when I write anarray with right-to-left words, it can get very complex. It’s not really sure which partof the beginning and end of the regalium should appear where and the order of the items – you wantyour components to be in a particular order, I know, so if you make an array in your IDE and it hasraw lingo like this, kept them all on separate ways like this so each direction it’s very clearwhich is the first and last line in your array.And that’s what I have for now, I want to do awhole streak of these where I talk more about the web design selects on Wikipedia and othersites, and how I would approach going from a simple website to a more complex website, addingCSS, adding some HTML attributes, that would allow you to support numerous content. So I’llhave more about that later. Thanks for watching.


As found on YouTube

Share this article

Leave a comment