Right-to Left (RTL) Support for Websites

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of Learn with Jason! Today on the show we have Moriel Schottlender. Thank you so much for joining us.

MORIEL: Hello! Great to be here!

JASON: I thought we were just going to get like a stage wave.

MORIEL: This is right to left. I was waving the wrong way and it's outside the screen.

JASON: I'm super-excited to have you on. You know, I have been following you on Twitter for a while. I have no idea about this world of right-to-left. I'm unfortunately, a typical monolingual American. I only speak bad Spanish and I have no experience with right-to-left languages. Before we talk about that, I want to talk about you a little bit. So, to everyone who is not familiar with your work, could you give us a little bit of a background.

MORIEL: Sure, I'm Moriel, hello. I'm a systems architect at Wikimedia. I'm looking at how Wikipedia can move into the future which is a whole thing in itself we can talk about over drinks maybe some other time. And I have been building interfaces for a long time. Especially for Wikipedia. Specifically for right-to-left users in other languages. Wikipedia takes languages very seriously, we support 400 languages. And a mix of the languages. We're gonna see what that means soon. But it does mean we want everybody to be able to edit in whatever language they're in. Whether they have whatever script or whatever direction.

JASON: Okay.

MORIEL: We have been working on right-to-left stuff for a while. I'm a right-to-left user. My original language is Hebrew. And when I was beginning as a developer, I was surprised that it was this deep and unsupported well because one of the things that happened when things were not supported well online or in technology in general, users stop expecting. Which is what happened to me too. So, we're gonna see what that means in kind of how to try to mitigate that trying your own software. That's where it comes from. I was so surprised, and I started delving into it a lot more and this is where.

JASON: It's amazing. One of the things I love about software, we all when we're young think we will get to a point where we've learned it all. And then I think the sign of experience is when you realize that you can rabbit hole on one piece of the Internet for your entire career. I love that. It's one of the things that you can go so, so incredibly deep. And you'll never find the bottom. There's always a little bit more to dig.

MORIEL: Or backwards, in the case of right-to-left.

JASON: Maybe at the very highest level, let's set some context. For a lot of folks, right-to-left is a relatively new concept for me. I didn't know it was a thing. Could you maybe just set a little bit of context about what is right-to-left in the context of the Internet.

MORIEL: Sure. So, when you read a language, write a language, when you look at the page, you as a left-to-right speaker expect things to start from the left. You read English from the left to the right, the beginning of things start at the left, usually left top. The computer also expects things to start there. But in languages that are right-to-left, Farsi, Arabic, Hebrew, the text starts from left-to-right. We read it right to left. That's not the only thing that happens. When you language starts right-to-left, the language is flipped around. Or for me normal, it's all about perspective.

JASON: Sure.

MORIEL: One of the reasons, for example, where logos are up top on the left is because users eyes tend to go to the beginning, right? To the top left. So, you would expect to see kind of like the top thing there. And then menus and stuff like that go by the expectation of the user. Users that use and read right-to-left automatically go the other way. And the amount of time even though I'm online for many, many years in English, the amount of time that I have been doing it too, even though I know to expect on the left, just automatic go to the right is incredible. It's a brain thing, right?

JASON: Sure, yeah.

MORIEL: It's the changed model of the wave thing.

JASON: You can teach yourself right-to-left handed. But if you're a right-handed person, you're going reach with your right hand by default. No matter how much you train it, right?

MORIEL: Right. Here's an even better thing. I grew up in a right-to-left language where you read right-to-left. But I'm left-handed.

JASON: Ah.

MORIEL: So, now you have a couple of things that go even more twisty brainy. An example, a lot of things flip around when you deal with right-to-left. You try to think of the other way. People think of arrows or icons in general. You have an icon, well, we'll show it a certain way for left-to-right people, and right-to-left, we'll flip it. It's a bit of a discussion about what kind of icons flip and whatnot.

JASON: Yeah.

MORIEL: That's a thing about a specific icon, the check mark, so, the check mark, right? Will go, there's a check and say there's a list that has checks on it. If I ask, and I do that a lot in my lectures, okay, everybody raise their hands and do a check in the air. What would happen is most people will do. I'll try to fit into the camera. Will do this, right?

JASON: Right.

MORIEL: Which is usually the way you put it on the web page. I will do -- where is the camera -- this. Because I'm left-handed. And I won't be alone. Even left-to-right people will do that. Some icons flip around not only based on what language you speak, but where your hand is. Which makes a lot of questions about what -- how do things look online, or how do things look online very, very interesting and complicated.

JASON: Absolutely. I'm already intimidated and we've gotten to check marks.

MORIEL: I know. And I think -- let's take a look at kind of how things look like. Let's open up Wikipedia.

JASON: Sure. Let me switch over to this view here. And, okay, so, before we start, because I will forget if I don't do this right now. Let's do a shoutout to our captioner. We've got Amanda back with us today. Thank you, Amanda, she's writing down all the things that we say for anybody that needs the captions. She's from White Coat Captioning. And that's made possible through the support of our sponsors, we've got Netlify, Fauna, Hasura, and Auth0 all kicking in to make that possible for us. You can find that on the home page of the site. While you're clicking on things on the Internet, make sure you do and follow Moriel on Twitter. And with that, I think we can you said open up Wikipedia.

MORIEL: Let's open up English Wikipedia.

JASON: English Wikipedia, here I am.

MORIEL: We all know the structure of the page. The logo on the left-hand side, the menu on the left-hand side, and on the top right, you have a user menu. And then the content. So, the content that -- and all of it is English. So, you kind of expect left-to-right. You expect that flow to continue. That is what happens. If you start a new tab, though. And now let's go to ar.wikipedia.org. That is the Arabic Wikipedia.

JASON: Let's close that. Okay. It's an immediately a much different experience.

MORIEL: It's flipped. Or looks like it's completely flipped and you can compare. The logos on the left-hand side. The right-to-left brain tries to look for the beginning. That's where we start reading. The menus are the exact opposite. You have the menu on the right-hand side and then the user menu on the top left, right? The search, if you even look at the search bar, the icon. Do you see the icon of the -- ah. It used to be. This is one of the arguments of the icons, should this flip or not?

JASON: So, it doesn't flip.

MORIEL: Nope. Because you're holding a magnifying glass, regardless of how you read, right? I would hold it differently because I'm left handed. But that has nothing to do with right-to-left. But if you go into the editing screen, we will look at things later, if you go into the editing screen, a lot of the things will change. It does depend on the language. If you have bullet list, then in Library, it will from left-to-right, but if you switch right-to-left, the bullet list icon will have to flip around to be from right-to-left. Because otherwise --

JASON: Oh. Yeah, yeah. Yeah. Because the bullet point here. And then are there -- let's see, are there any bullet points here? Yeah. Here's a bullet point.

MORIEL: That's right.

JASON: Okay. Yeah. So, a lot of things to think about here. Also, just what a beautiful hand -- what a beautiful language. I never actually look at other languages. And this is -- this looks like art. Not handwriting. Okay. Oh, Nikki is asking about top-to-bottom as well. Not what we're talking about today. Is there one that we could pull up to show that?

MORIEL: I actually do not. No a web page. I don't have an example, I don't have it in front of me. Maybe we can follow-up on Twitter later. That's a whole other challenge too. Because top-to-bottom can be top-to-bottom left-to-right or top-to-bottom right-to-left. It's a whole where do I start reading this and it depends on the users and when they expect things.

JASON: No kidding, yeah, wow. That's -- okay. So, I can see how this can become a whole -- like, this is a rabbit hole.

MORIEL: I was trying to make a lightweight introduction before I completely twist your brain around.

JASON: [Laughs]

MORIEL: We'll see how that goes.

JASON: Yeah. Okay. So, we know -- and just kind of looking between these two, it's -- you can tell this is Wikipedia, right?

MORIEL: Right.

JASON: But you can also tell that it's been very thoughtfully changed to match the expectations of somebody who reads from right-to-left. I imagine this is not a common experience.

MORIEL: Unfortunately not. But there's a whole bunch of challenges that goes into supporting right-to-left languages. I think the first one is just recognizing that this is a viable market that you should support. I think a lot of websites just forget that or just de-prioritize it for various reasons. And there's a lot of users. We're not just talking about a very small niche. And I would still say that you should support it even if it was a small niche. And yet it's not, right?

JASON: Right.

MORIEL: A lot of websites just don't. And some websites, is that when they do, they kind of after thought it. Well, so, we just kind of flip everything.

JASON: Right. When you say this is not a small niche, this is -- like how many people in the world are reading right-to-left? This is -- this is not a small number of people.

MORIEL: No. So, somewhere between half a billion to a billion. I don't have numbers here. I think on RTL:WTF I was trying to keep updated numbers. We have -- so, if you go to the intro -- no, no.

JASON: Oh, sorry. Back to --

MORIEL: I'm trying to look at the green button. So, what is this? That has kind of an introduction. Should have bullet points with the number. Yeah.

JASON: Here.

MORIEL: So, and as you can see, I was trying to give you the experience of what right-to-left people experience when things are not supported. So, things are a little flipped. And the language is little more difficult to read because it's English, but you start reading left to right. But it is aligned right as if it's right-to-left language. So, you can see some of the experiences that we go through when we have websites that don't support right-to-left. But you can also see more or less the numbers. You have 350 Arabic speakers, at least. 110 Farsi. So, it adds up. It's a lot of --

JASON: This is a lot of people. Yeah.

MORIEL: Yeah.

JASON: Yeah. This is also like I -- and so, looking at this as an English speaker reading right-to-left right now, this is the experience you're having the vast majority of the time is this really kind of disconcerting, like, why is everything backwards kind of --

MORIEL: Yes.

JASON: Okay. Yeah. Okay. So, building a little empathy through reading this way. Because this is rough. Like, I have a hard time even scanning this.

MORIEL: Yeah. Yeah. This is basically what we need to do. But it gets even better because I keep learning about new bugs that are happening before kind of talks and stuff because I'm trying to like, oooo... let's test this and see if I can... so, things are also inconsistent. Which I think is the biggest problem. So, we don't support right-to-left at all. When we do support it, it's an after thought. And it's inconsistent. Even things like Facebook and Twitter. We can argue about how much there's the support. Just the way the support is not consistent between them. It's hard as a user to expect. You kind of need to learn the system as you go, this is how they do it. It's a little bit difficult. But there's not much to do except get them to coalescence on one method which probably won't happen. But the biggest problem is if I post something on Facebook, for example, that is right-to-left, it will render properly on desktop. Okay? As a right-to-left. But if you go to mobile, it actually is reversed. The way, basically, the effect that you're seeing on the screen with RTL:WTF.

JASON: Oh.

MORIEL: The same with Twitter, by the way.

JASON: It's inconsistent between different applications.

MORIEL: The same application with different platforms. Hangouts, same thing. The algorithm that they use to decide whether to align it right or left, based on whether there is a right-to-left language in there, or the majority of the post is -- is right-to-left, whatever they use is inconsistent between their desktop experience and their mobile experience. Which is very problematic. Because if I send you a message, right? And we're gonna see how these things can flip and actually change the meaning of sentences. If I send you a message through the mobile device and it's going to look a different way, you might get it reversed and read it differently.

JASON: Oh, no. Yeah.

MORIEL: So, when we talk about the problem of right-to-left, even these kinds of things. Right-to-left users don't really expect much, that's why. It's really difficult to kind of, you know, figure out how to write right-to-left online properly. Because everything you do ends up with somewhere it's broken. Either for you or for someone else. And there's a lot of tricks that people come up with, you know, over the years to try and still send what they want to send. Even though in one system it looks this way, and in another system, it looks that way.

JASON: Right. I mean, that's -- I'm just imagining like -- I mean, we've seen, you know, in English the thing that causes the -- that kind of chaos is like comma usage. You've seen the jokes about the Oxford comma or like -- it's like the let's eat --

MORIEL: Yes.

JASON: This one. Like, these are -- whoa. Where am I? Here. Like this kind of joke, right? These are minor things. So, I can imagine that if I, as a -- oh, my goodness, what is that URL? I'm sorry. But if you think about that as like not just me forgetting to put a comma in, but me writing a sentence and having the computer just actively change my sentence with some kind of half-implemented best guess, that sounds like a recipe for chaos.

MORIEL: Yes. And here's an example. So, there's a -- there's a -- in Hebrew you can say -- it's a very gendered language. Every object has a gender. Similar to Spanish. And a couple years ago, something changed with the way you say specific words. I was saying, okay, how is the Academic of Hebrew recommend they say noon. Was it an ah sound or an O sound? Okay. I will look it up. So, I did, and I found a Facebook post. And I was looking through my mobile device. Because I know right-to-left language, I immediately notice that the Facebook post is not aligned correctly. It is left-to-right. Even though the post is right-to-left. They used transliterated Hebrew, The Academy. You should use -- you should say this word this way. They wrote it in Hebrew. But when they said "This way" they said to English. Because English has like O sound and A sound. They said "so" instead of "sa".

JASON: Okay.

MORIEL: Because it was aligned to the left, and those were the two words in English inside a post that was completely Hebrew, the two words flipped.

JASON: Oh, no!

MORIEL: So, they have very effectively given me the wrong advice. But only in mobile.

JASON: Oh, no, that is great. So, that sounds like -- this is like my worst nightmare because I spend so much time thinking about communication and clarity. And this idea that -- that because we haven't implemented these things well, we're making it impossible to have clarity. That is really challenging. Because that also means, right? If I'm understanding this correctly, that on desktop, it's correct.

MORIEL: Yes.

JASON: So, on desktop I get the right answer, on mobile, I get the wrong answer. And there's nothing they could have done to fix that.

MORIEL: They could have made it consistent, Facebook.

JASON: Facebook could have made it consistent. But the person posting, the only way to combat it is to make it an image.

MORIEL: Yes, make it an image. These are hackie stuff that users do. Like when my mom and friends are going to read this and it's important to me, I insert a new line in front of every English word. I write my Hebrew, Hebrew, new line. New line, so, instead of new line, sa. Each line is a new line, you have your order set. They can't flip because they only flip when they're internally inside a sentence. You have your new line, your new messages, you know that is the order. It is also not great to communicate this way.

JASON: Sure.

MORIEL: But those are some of the tricks that in chatting, right? Like in SMS messages or WhatsApp and Facebook and even Slack sometimes. You kind of like, if you really care about the way that it looks, you gotta --

JASON: I'm kind of making light of this, but it reminds me of when we're kids and, well, I guess anybody who grew up in my generation and had an original Nintendo. And you would be playing the game. You didn't have to just play the game. You get the cartridge, blow in it, shake it just right, and shake it three or four times and then you get to plug it in. You don't just get to chat with your friends, use SMS, you have to learn all of these hacks to make chat work.

MORIEL: Yes.

JASON: That's not fun.

MORIEL: But it is what it is. And the funny thing here is as someone who is involved in supporting right-to-left --

JASON: Yeah.

MORIEL: There are certain tricks now so entrenched with right-to-left users, even when we fix them, for example, there's some issues and we might be able to start looking at that. There's some issues with arrow movement. If you use your keyboard to go right, and you are in context with two languages, English and Hebrew together, English and Arabic, your cursor will move around. There's a perfectly good technical reason for it, but for the user, it looks very weird, right?

JASON: Yeah.

MORIEL: It's not clear where you put something. In the editor, when you edit articles in Wikipedia and the visual editor, we really took a lot of care to figure out where the cursor should move to. What happens if you have like Hebrew and then the image in the middle. Is right means right or left or whatever? And when I was talking to my friends to kind of like look at that, they were so used to it not working, they had trouble with the fix. They were like -- and we were like, but it's working. But we're not used to it. You're used to broken. It took a while to realize, oh, I was doing hackie stuff to do that. I don't need that. It took time to snap them out of there is a better way to do this.

JASON: Yeah. That's wild. So, somebody earlier asked, you know, what can we as developers do to improve this? And so, I'm kind of interested in seeing that as well. You know, it sounds like this is something that's, hey, let's just fix that today. But maybe we can make small improvements on it.

MORIEL: Yes.

JASON: I want to dig into that. If I want to do that, what is my first step?

MORIEL: One more introduction to something before we do that.

JASON: Yes, please.

MORIEL: Go back to the English Wikipedia. Or the Arabic Wikipedia, even better. And at the end of the URL, we're gonna add a parameter. At the very end of the URL, you should add a question mark. And then uselang. It's the same word, uselang, equals. See -- equals -- en. What you're telling the system right now is show me everything in English. Now look what happened. You are still in the Arabic Wikipedia. The content itself is still Arabic. But the interface switched. This is useful if you're multi-lingual but you don't have as high a control of the other language. You want your settings and your menus to be in a different language, but your content to be in that language**.

Now, the reason I show you this is because when the right-to-left was completely right-to-left and the left-to-right was completely left-to-right, it was a little bit more straightforward. JASON: Right.

MORIEL: You can say, well, everything flips. But the majority of time online, it is not 100% right-to-left or 100% left-to-right. Firstly, even right-to-left, you remember ins are left-to-right. You have some sort of mixed stuff in that makes it a mixed directionality rather than complete directionality. And that's where a lot of the troubles come in.

JASON: Right.

MORIEL: Now that we've kind of seen how that gets complicated... we can maybe delve into -- delve into trying to see what we do when we develop apps.

JASON: Yeah.

MORIEL: And what to kind of look out for.

JASON: Yes. So, I cloned -- this is a repo that I will -- let me bring this over here. So, we'll just drop this over here. And now I'm -- I'm -- so, let me, I guess, I'll just open this up so we can peek at it. All right. So, we have a Vue app. And inside of it, we've got...

MORIEL: So, the important, I think, bits, is you have to main. I kind of shoved it in there. So, main.js. So, I'm using something called a vue-banana i18n. It was made in the Foundation for translation. It's the English translation and then the Hebrew one. I made it so that you won't need to type any other language other than English**.

But it is a super-cool tool. It also allows you to do gendered languages, plural. A lot of the tools that we use at the Foundation. JASON: Nice.

MORIEL: So, I did that. And, then, it's just a really basic Vue app for us to tweak.

JASON: Great. So, let's fire this thing up. So, I'm gonna go look and see. We've got serve. So, I'm gonna npm run serve. And this... get this thing up and running for us.

MORIEL: I'm like crossing fingers because the demo effect is...

JASON: [Laughs] Let's see... here we go! Running at 8080. Okay. Here is our -- here is our app.

MORIEL: So, I'm -- I just wanted something where we can basically type in information, see how it presented. And then wait for us to flip the direction to examine it. So, this is kind of a really simple guest book app, I guess. Where just add it in. Nothing is saved in -- there's no database or anything. It's all VueX so if we refresh, we'll lose. You can see your name, your email, a message. All of these are just simple inputs. I am using Vuetify in here. Vuetify supports right-to-left very well, but it's all or nothing. You either have it all right-to-left or for left-to-right. You can't have a mix between them. Which is common, unfortunately, but also produces some issues. This is just a really simple app. Hopefully without too many bugs. But, you know**.

And then on the very top, I made a little switcher. So, you have a switch between left-to-right and right-to-left. And the only thing this does, you can go into the code if you want to see. The RTL, the LTR, all it does, it's inside the header. So, the script itself, all it does is switch the Dir attribute on the -- yeah. A little bit below there's -- there we go. So, you have -- JASON: Oh, here.

MORIEL: You have document body, Dir, RTL or LTR. And then I'm telling Vuetify to change itself too. So, that's basically.

JASON: Got it, got it. Great! So, if I click this, boom! There it goes.

MORIEL: Yes.

JASON: Left-to-right. And then if I switch it over to Hebrew, we get Hebrew.

MORIEL: That's right.

JASON: Okay. All right. So --

MORIEL: Perfect.

JASON: In the abstract, this all makes sense, right? But I can see some things that confuse me. Like when I click this, these jumped all over.

MORIEL: Yes.

JASON: And, you know, my -- the position of colons got moved in an odd -- look at that. That's weird.

MORIEL: Yeah.

JASON: And then there's like -- does it move 'em for me? Ah! Oh, that's so weird. Okay.

MORIEL: I was waiting for this. Excellent.

JASON: Oh, my goodness. That is really disconcerting.

MORIEL: Yes. So, even if you add exclamation point, and that now -- now do space and continue writing.

JASON: Ah!

MORIEL: Ah?

JASON: Oh, wow. Okay. Wow. That is -- that is... that's a lot.

MORIEL: Yes.

JASON: Okay. Okay. I see the problem. And so, and I also see what you mean. So, your work around for this is to like end up typing all the messages like this.

MORIEL: Yeah. If you have a system that completely doesn't support anything, then you start like -- yeah. Writing like each message underneath one another. So, just very, very quickly just so that it maybe explains why this happens. There's the Unicode by directional algorithm that is meant to support bidirectionality. What was when it's English and then right-to-left. I'm going to do a brief introduction. In RTL:WTF, there's a full intro to what it is and what it does. When we think about directionality, we think about the context. Where am I? Am I in the context of right-to-left? The context of left-to-right? In the context of the text box, it is aligned to the right. When you're starting to type, you're typing English, the internal context of English is left-to-right. The main context of the input is right-to-left**.

Punctuation goes at the end. JASON: Right.

MORIEL: If you just put a punctuation after a sentence, even if you wrote English, internally, the English will be left-to-right, you will be able to read it. But then the punctuation is at the end, because the entire text box is right-to-left, it will go right-to-left. Once you continue the sentence after the punctuation, then suddenly the punctuation is wrapped in English. The context is left-to-right and it jumps back and keeps going with you.

JASON: What's incredible about this is what you're describing is like the same -- it's the sort of challenge that we deal with in programming all the time where, like, you're dealing with like scope hoisting and the issue of -- of, like, we have independent units of state. But how do we get them to talk to each other? But not -- it's like, hey, computer, do it this way, not like that. Right? It's very -- I can see -- yeah. I can see how immediately hairy this gets, you know? And my -- the part of me that fears state management is already sad for the way that I assume we have to fix this.

MORIEL: Yes. You can even delve even deeper. Let's start over with the message.

JASON: Okay.

MORIEL: Let's say that you just want to write span, or you know what? I'll start it easy. Just add like a message where there's an HTML like strong tag or something. Right?

JASON: Oh...

MORIEL: Now, did you notice what happened first thing when you started writing the open --

JASON: I did not like that at all.

MORIEL: So, the first thing that happens is your open tag presented exactly reverse, right? Did you notice that? There we go.

JASON: Look, and it got super-weird!

MORIEL: Now put another text inside the -- inside the strong and close it.

JASON: Ah! I hate it! Thanks!

MORIEL: You're welcome.

JASON: [Laughing in pain] -- this is maybe the most, thanks, I hate it moment we've had on this show.

MORIEL: Thanks. I'll take it as a moment of pride. My recommendation in this kind of thing is that the less you have right-to-left users write in the right-to-left box, the better. Do something visual, have something that splits it. See what the actual purpose of this is and see if you can make it better. Even try to use like markdown. Right? Which has its own, you know, challenges, but at least it's a little better. You can actually like, okay, only the hash goes in the beginning. At least I know this. Not suddenly everything is starting to flip around and go all crazy. Also, if you use markdown, and if I write it in completely in Hebrew, then it makes sense. It's all just right-to-left starting, right? But if I need to write Hebrew and I need to write HTML, I have to write the English tag names, right? Like "strong" has to be in left-to-right**.

Try to use things that are not a HTML inside a right-to-left box. There's no way to solve the jumpiness part unless you want to start programming -- like reprogramming the way that the text area works, right? JASON: Right.

MORIEL: With basically reimplementing an editor. So, don't do that.

JASON: Woof. Okay. And is this something that we can -- like, so, you can't even do something like, all right, we know we're gonna write HTML in this box. Force this to be left-to-right like English so it doesn't jump around.

MORIEL: Absolutely. 100%. Let's go back to writing -- let's just flip it around.

JASON: Okay.

MORIEL: Let's do a nice little experiment again. I don't know -- I'm kind of like, should I make you cry? Or should I wait a little bit? I'm not sure.

JASON: It's been a while since the chat's seen me cry. We can just go ahead and jump right into it.

MORIEL: All right. So, try to write -- let's do like, you know, a very quick kind of a link, right? Like href to wherever. All of it in English. You can put blah, blah, whatever. But... and so, everything works because it's, you know, it's right-to-left -- it's left-to-right, it's all good. Let's add let's say a title prop. Or either alt or title, doesn't matter, after the href. Right? So, title, blah, whatever**.

Now, in the -- so, this looks great! Because you're left-to-right, you're writing left-to-right, looks excellent. But if you're writing HTML now for a right-to-left language, both the title and the text of the, you know, link will be in right-to-left language. Well, let's try that out. So, in the README, I posted, there's examples of a couple of strings that you can just copy. I actually -- this is VSCode. JASON: This is VSCode.

MORIEL: Okay. See if you can mark them here. You might want to mark them online. Because there's also -- let's see if you can mark them. Does that work?

JASON: Yep. It works.

MORIEL: It's just, there's also different ways where the mouse movement, cursor movement moves.

JASON: It definitely tried to argue with me.

MORIEL: Yes. And yet, if you --

JASON: Oooo, buddy.

MORIEL: It might be easier for you to copy it when it's on GitHub. Which is a whole other issue. All right.

JASON: Okay. So, there's... all right. I've... oh, no, things got really weird.

MORIEL: Which one's which?

JASON: Oh, my god.

MORIEL: Which one is the title and which one is the text of the link?

JASON: I don't know anymore.

MORIEL: Me neither. Well, I kind of do because I know what happened. No one, exactly. When you say, let's stick it to tr.

JASON: Don't do that.

MORIEL: But be careful. Generally speaking, visual -- visual way of editing is better. This is also the reason why there is inconsistency a little bit between the way that right-to-left languages are displayed inside IDEs. And this is part of the reason why I have three IDEs that I have to pick between. I think VSCode, for example, as you saw, it does render Hebrew the correct way. So, right-to-left. It shows it. But it is also fairly good in keeping it contained. But because it does it right-to-left sometimes when you write code, you run into the problem that you're looking at on the screen right now where essentially what happened here is the two Hebrew words you're seeing, they're actually supposed to be the other way around. The word that you see on the right is actually the title. And the word that you see on the left is actually the content of the link. They flipped.

JASON: Right. So, it took -- so, we're English, English, English -- we get here and then it flips.

MORIEL: Yeah.

JASON: And now we're at title --

MORIEL: Yep.

JASON: End of the title, end of the tag, link text and then it flips again.

MORIEL: That's right.

JASON: Nope. That's it. Nope. I'm done. I just gotta... [ Laughter ]

MORIEL: Yes!

JASON: Sheesh. Okay. All right. So, I request see -- yeah. All right. I do kind of want to cry to be honest. [ Laughter ]

MORIEL: Yes. I was trying to go slow. Kind of like, well, I'll just introduce you slowly. But, you know, here we go! So, yeah, it's a mess. So, also consider, for example, an input somewhere. Sometimes we have, you know, like a dialogue or something that asks us to put JSON object or to edit the JSON object. If you have a JSON object where the keys and the values are right-to-left language, they flip on you, it is the most frustrating thing ever. You don't know which one is the key and which one is the value unless you really look in. So, yeah. Every time you have these kind of things, I think -- I think these are actually good indicators for rethinking your UX in general. Because it might actually not be like a great UX for general -- even for left-to-right users to fill in a JSON object**.

Like, maybe think about something that is graphical. So, you can see, you put both words, they flipped. I'm seeing you cry. So, I think you noticed. That's right. JASON: Look at it. Okay. It's left-to-right, not anymore.

MORIEL: That's right.

JASON: Oh, my god. Oh, that is... that is brutal.

MORIEL: Yes. So, yeah. So, yes. So, these kind of things are maybe, you know, a visual -- visual editor with buttons that make it bold for you rather than having the editor write it. Stuff like to. That might be -- might be better**.

Or, as I was saying with IDEs, some of the IDEs do not support in actuality. When I type Hebrew in them, they will type it backwards. And very, very ironically, I sometimes need that. That is preventing the exact like problem that you're seeing in front of you now where things flip. JASON: Right. Well, and so, yeah, like, like 503 is asking, so, we can't close the link tag. This link tag is closed. This is a complete like -- it will render properly.

MORIEL: Yes.

JASON: Woof!

MORIEL: Yeah.

JASON: That is, yeah, okay --

MORIEL: Submit it. Submit it.

JASON: Yeah, let's submit it.

MORIEL: Yeah.

JASON: Oh, it just got sanitized which is the right way to approach that.

MORIEL: Oh, I made it not sanitized. Oh, it might have -- oops.

JASON: Many things may have gone wrong here. Let me try again.

MORIEL: It should -- it should... did we not close it properly?

JASON: I thought we did.

MORIEL: I thought so.

JASON: Let's try one... see if it will work this way.

MORIEL: Oh, no! Oh, did I not do it right?

JASON: Yeah, they're sanitized. We can clean that out. Let's jump in. And let's see... entries in

MORIEL: Yep. I thought that I was -- oh, no, I didn't. I played around with this, that's right. Yeah, we can put it in I think v-html.

JASON: Like that?

MORIEL: Yes and then entry.message**?

JASON: Like this? I don't write a lot of Vue. I think you need a column, but I'm not 100% sure. We'll learn together. JASON: Let's try it and see what happens. These are valid links despite looking broken.

MORIEL: And I see a note here that the -- I don't know what you call it, the closing tag? The closing? What is this sign? The big --

JASON: We call those pointy boys.

MORIEL: Those, excellent. They flip at end. But --

JASON: Right, right!

MORIEL: But they flip because when they are inside the context of right-to-left, the rendering of it flips. Really, when you look at your keyboard, it is lying to you. That symbol is not actually what you're gonna get when you click that symbol. You're going to get opening bracket and that's the content, see?

JASON: This is the part I'm struggling with. I'm now going to press what I consider to be the opening parentheses key. So, shift 9. And it looks on my keyboard like I just pressed shift zero.

MORIEL: Yes.

JASON: That is very disconcerting.

MORIEL: Yes. Yes. It -- they consider -- so, shift 9 and shift zero are not really left parentheses and right parentheses. They're open parentheses and closed parentheses.

JASON: Right.

MORIEL: And the same with the square brackets, curly brackets. I think -- I'm trying to think of any more. There's probably a couple more.

JASON: Yeah, curly boys, pointy boys, square boys, round boys.

MORIEL: All of 'em.

JASON: All of 'em.

MORIEL: All of em just flip around.

JASON: It doesn't happen -- oh, thank god. I was worried it was gonna happen on front slashes and backslashes. I was gonna have to leave the room.

MORIEL: It does not happen to front slashes and backslashes, thankfully.

JASON: Yeah. This is a challenge. Okay. So, you said the solution is to make it visual and that's really the only solution. There's not a way to trick the computer into saying, like, hey, maybe don't do that in this field.

MORIEL: I mean, there is if you stop supporting. So, the IDE that literally does not support right-to-left writes it backwards. Thinks that it is LTR that is backwards. That supports adding those links because it avoids the flipping, right? So, you could -- you know, it just depends on context. Like if you are a developer and you have to write code, then there are ways to do this where, you know, some of the IDEs will just allow you to insert it without breaking your brain or crying and then you continue. But if you're a user, like online on the web, it's really difficult. There's not a whole lot of ways to do this properly without flipping. So, either your users know that this is what's going on, which is what basically happens in Hebrew Wikipedia**.

If, like, they do sometimes need to add in HTML tags. And then what they do either is create their own templates. So, they're kind of like, you know, instead of writing, you know, the brackety stuff, blah, blah, blah, they create kind of a template that uses Hebrew words. It's all right-to-left. And says like, I'll give you basically a function kind of thing. Where I say, this is gonna be a link. Here's the title and here's the URL. Then you have a lot less of a confusion. So, they do that sometimes. JASON: Yeah. I got you. Kind of like a text expander sort of thing where you would -- you would kind of -- I don't -- I don't have any of those on my computer right now. But where you would say like, you know, I want to do a link. So, you type, like --

MORIEL: Yep.

JASON: The link and it would actually ask you for fields. But it does all of the construction for you.

MORIEL: Yeah.

JASON: I got it.

MORIEL: Yeah, something like that where you can have that. They either do that or use the visual editor. Which has a button to have a link to ask you. There's not a lot of ways to fix, I want to write HTML with right-to-left on the web. It's just -- it's very, very --

JASON: Yeah. Okay. So, are there, like -- what -- I feel... I'm just like... just crushed.

MORIEL: There's what we can fix.

JASON: Yes. Let's fix what we can.

MORIEL: Yes. So, the first thing that you kind of noticed and correctly, I put it in on purpose. You see that one of the entries to my lovely guest book is whether you're left handed or right-handed. Go back to left-to-right. Right-handed, arrow --

JASON: My left hand and my right hand. Yeah.

MORIEL: Each one is in the right position. The left is on the left, the right is on the right. When you switch to right-to-left. Because all I did was put correction right-to-left, it flips the entire page. It also flips the positions of these, right? Now the left, it's kind of -- wait, my left hand is on the right. Which shouldn't happen.

JASON: Right, right.

MORIEL: So, this is kind of an example to say --

JASON: It's hard to type like this.

MORIEL: You could try, I guess. Although my dad uses the mouse on the left-hand side. He's left handed too. And I just don't think I'll ever be able to --

JASON: That's a lot. Nope. My brain won't do that.

MORIEL: No. But anyways. I wanted to show this to say, we initially said, hey, just flip everything.

JASON: Right.

MORIEL: Be thoughtful. If there's a really strong reason for it to stay on the left, don't flip it. I think it's in the AddEntryForm.

JASON: Here?

MORIEL: Yep. All these labels. And this one. So, if we have Dir, the attribute, Dir, direction, Dir, equals LTR. That's one way to do it. Okay? So, you will stick it always -- even if you're right-to-left to always be left-to-right. Now, that's okay. Except that also means that if you translate now, so, if you go to Hebrew. Now you get the other problem where it is in the correct position where the arrows are, but look exactly like you're punctuation is the wrong way because now --

JASON: Right.

MORIEL: That entire section is like stuck to be left-to-right. So, the other thing you can do. There's a bunch of things you can do here. This is flex. You can stick it always to be left-to-right or whatever. But another thing that you can do which might be even better. Anywhere that you know that you're going to have either user-generated content, where you don't know which language it's gonna be. Or if it's mixed or not. Or wherever you're gonna have translated content that could be either, we did something called isolation, okay? So, we take that string and we tell the computer, whatever your general context here, this little bit is isolated. So, judge it by its own content.

JASON: Okay.

MORIEL: And there's several ways to do that. But the best one in my opinion, or the quickest one, is the tag bdi.

JASON: Like that?

MORIEL: Yes. And close it at the end just before the label.

JASON: Okay. But that's probably not for -- I need to do it around the whole input?

MORIEL: No, just the text is good. Where you put it is actually perfect. It's because you want the computer know what to isolate.

JASON: And do I keep -- I don't want to keep this dir, do I?

MORIEL: So, the direction of the entire div will mean that we are keeping the logical direction of whatever's inside of it in a left-to-right way. Right? Which means that it will keep left on the left and right on the right**.

JASON: Okay. Now, I will, before I get like -- there's a lot of -- there's a lot of ways to fix all of these things. I just don't want to overcomplicate us. JASON: Right, right.

MORIEL: The plus of saying dir LTR, you see the location of -- oh, my gosh, it's not check box. It's options.

JASON: The radio?

MORIEL: Radio. Those locations will always stay on the left because the entire thing is left-to-right. It's not a perfect solution. I would recommend instead sticking like either float or making the flex always like this piece is always on the left instead of logically --

JASON: Got it.

MORIEL: Rearranging. It's just a little longer to handle here. So, I wanted to --

JASON: But we can see that by using that bdi tag, we only did it on that one. The exclamation point is in the right place instead of being stuck to the beginning of the word.

MORIEL: That's right.

JASON: So, if we go and add that down here as well... and add one more. Okay. So, I'm not gonna save this yet. So, looking again, this is at the beginning of the sentence. So, that kind of, what was disconcerting for us about being down here when I say, hello, right where the exclamation point, even though I typed it at the end showed up here, that's what's happening here. So, if I saved that, okay? It looks right in English. So, let's switch it back to Hebrew. And I did it wrong. What did I do wrong?

MORIEL: No, you -- where did you put the bdi?

JASON: Did I put it in the wrong place? I thought I put it around the form handler.

MORIEL: No, what is happening?

JASON: Maybe I need to reload the page?

MORIEL: Ooo... what's happening?

JASON: What have I done? Did I typo this? Bdi...

MORIEL: I'm looking at -- this is an input, this is a label. You put it in the right place. This is the bdi. Did I mess up the translation? Let's go index. To main.js.

JASON: Main.js and look here.

MORIEL: Handedness --

JASON: And right?

MORIEL: Oops.

JASON: Oh, did you?

MORIEL: See, I'm gonna walk away now.

JASON: wait, hold on. Do I just need to move this? Oh, my goodness, oh, my goodness. So much is happening.

MORIEL: This is the problem here. This is why I accidently did this. And this is the problem -- like VSCode is really great that it supports Hebrew. But this is -- what you're experiencing right now is exactly why I sometimes go to an IDE that I have -- that doesn't support right-to-left at all. And it will write it backwards for me. But that's fine. I know exactly where everything is. That is exactly the reason why. Well, I guess I could pretend that this was totally on purpose to show you, right? How things work.

JASON: Okay. But if I -- if I save this now, it should --

MORIEL: Yeah, I think I put -- there we go. I put in the wrong location.

JASON: I had to cheat by adding this space to reset the position.

MORIEL: Yeah, where the end is.

JASON: Yeah. And I think if I delete this --

MORIEL: This should be okay.

JASON: It should be okay.

MORIEL: Yeah, the space was more for kind of like the cursor and Vue to figure out where the end is.

JASON: Yeah, yeah. Okay. Now we have everything is in the right place.

MORIEL: Yeah.

JASON: Woof!

MORIEL: Yes.

JASON: Can we get an oofta in the chat? Like... oh, my goodness. That is a lot.

MORIEL: Yeah. So, another thing that we can already see is that the way that the spacing is done is not great. So --

JASON: Oofta, all right. So, that's exciting. Yeah, so, our spacing is a little bit wonky. And is that -- so, actually, I have a question about this with CSS. So, if I set -- when I look at my right-to-left and my left-to-right, go to English, which -- so, which spacing are we talking about here?

MORIEL: So, I think I fixed, and now we can see it, the inputs. I told them to be like 100% width. We can't see the spacing between name and input. I was kind of seeing that when you switch the order around, like when you switch right-to-left, left-to-right, because initially I put, you know, margin right or padding right or whatever, when you switch it around, you don't have a padding left**.

So, you need to also consider that if you allow for kind of like switching around, your styles need to adjust too. Like you now have -- JASON: Like, it's -- yeah. It's not just gonna flip our design over. It's gonna move things, but not adjust the CSS.

MORIEL: Exactly. And you can see an example for that. If you look at the logo. Between the logo and the switcher buttons, right? There's a little line. A red line. Like a thick -- a thick red line. If you switch to right-to-left, that line's moved. That is on purpose. So, if we go back to the code of the header... so, if you go to the CSS, you'll see that there are settings with two rules. When it's right-to-left, you have to put the border on the right with some padding. But when it's left-to-right, you have to put the border on the left. So, you have to be very conscious about what you're flipping and how. And then put like your CSS rules accordingly. There are tools that help you it that way. There is CSS Janice.

JASON: Janice like the name?

MORIEL: Yes.

JASON: How do I spell Janice?

MORIEL: Oh, no W-j-a-n-u-s, Janus. If you something like margin left -- that's right. You'll see...

JASON: Oh. That's nice.

MORIEL: Yes. So, it does it automatically for you. And it also has exceptions. You can tell it, flip everything except this bit. Which helps you in places where you have left center, right buttons. Flip everything except these buttons. You have exceptions to it. This will also flip images for you so you can have icons that are called pencil RTL and pencil LTR and it will automatically flip between them.

JASON: We have questions in the chat about CSS logical properties. I'm not even sure -- I don't know what those even are. Do you know what those are?

MORIEL: Are you talking about logical versus -- can you expand about that? Are you talking logical versus visual? Are you talking about the bdi.

JASON: Oh, margin start versus margin left.

MORIEL: Okay. I was about to -- I was about to -- yes. I don't know if they -- do they work on all browsers already? The margin start? I think not. I think they're not yet actually supported. So, the idea here is exactly what I'm showing with like, you know, you need to do margin left. But then when you're right-to-left, you need margin right.

JASON: Looks like they do have pretty decent support here.

MORIEL: That's great. I actually did not know that they are supporting so many now.

JASON: Hooray!

MORIEL: Awesome. Thank you.

JASON: Okay. So, then if that is supported, let's -- let's look --

MORIEL: Let's give it a try.

JASON: Padding block start. That is a thing. So, I would say padding-block-start. Right-to-left, we want the padding right. Left-to-right, we want padding -- yes. So, that's start. And then I would theoretically be able to get rid of all of this.

MORIEL: Yes. Border. You need border too.

JASON: Oh. Do we have a border start?

MORIEL: Do we?

JASON: Ope.

MORIEL: I actually, yes.

JASON: Yeah, border block start. Okay. So, let's do border block start. This is just gonna work. This is gonna be amazing. No. I did that very incorrectly.

MORIEL: Oh. Apparently the start is on the top-bottom.

JASON: Okay.

MORIEL: Yeah, that's a good thing -- I haven't really used these directly. If anyone knows which one would be the logical start of the right or left, that would be great. Otherwise, we will have to put -- is it inline? Is it start with?

JASON: Is it inline?

MORIEL: Oh, we have guesses here. I actually am not sure.

JASON: Where is my... eh? Show mentee. Border bottom, border left. Yeah, well, I wanted -- inline is top-bottom, okay.

MORIEL: Okay.

JASON: We did... eh? Hey! Okay.

MORIEL: Oh!

JASON: But I screwed up part of it. So, it's gonna be inline.

MORIEL: All right.

JASON: Wow!

MORIEL: Perfect.

JASON: I'll switch it. Hey! That's slick. I didn't even realize this was in the works. So, that is very exciting to see.

MORIEL: I didn't realize it has such a -- such a big support now. I was still thinking about it as kind of like, oh, it's coming to be everywhere. And I'm happy to find out that it does.

JASON: I'm happy to --

MORIEL: 100%, yes. Thank you for that.

JASON: This is for older browsers like IE.

MORIEL: If we still ever -- yes.

JASON: I mean, I haven't been building anything for IE. But I am -- I am thrilled to see that compatibility chart. Like, I love it when the only thing left is IE because it really feels like unless you're building a corporate intranet or something like that. You don't have to worry too much about IE. I know usage in certain areas is significantly higher.

MORIEL: Yeah. I think if educational, right? Entities like universities around the world still might use it.

JASON: Oh, interesting. I -- that was one I hadn't heard. But, yeah. We could put a supports block would be a great way to handle that.

MORIEL: Yes. So, I -- I think the biggest thing about, and also the logical properties, start thinking in general instead of from the left or from the right with start or end. I encounter these things also with instructions. So, fill in and click the button to your left. That's not true in right-to-left. When you give instructions, when you write things, when you put arrows to continue or whatever, prefer the words like, you know, continue or to the -- to the beginning or towards the end or stuff like that.

JASON: Yeah. Or the following button, not the button to the right. Or something like that. Yeah, that's -- that's a great way to reframe that.

MORIEL: Especially if you build a library. So, a lot of libraries where you have pop-ups, right? And then the pop-up positioning is going to be like top left. But it flips for right-to-left. So, now in right-to-left, it's top right. So, now you're really breaking your brain trying to --

JASON: Yeah. You're like, okay. The setting is top left, but it's actually controlling top -- yeah. It hurts.

MORIEL: Call it start, call it beginning, you know? Call it towards the -- like whatever. That instead. Prefer those instead of like left and right which could flip around. Let's try to fill in the email again. I think you already know where this is going in the email, right?

JASON: I'm already sad.

MORIEL: Oh, no, you're left-to-right.

JASON: What am I doing? Yeah, this looks exactly right. Ah! I hate it, I hate it. I hate it.

MORIEL: There we go. There we go.

JASON: And then it pops back. Oh, I still hate it! Oh, it's the worst!

MORIEL: So, imagine filling in a URL too? I didn't do that to you. But imagine having another field with a URL in it. This is actually easily fixable.

JASON: Oh, it's the worst! Oh, I hate it so much.

MORIEL: Yeah.

JASON: Oof.

MORIEL: It's weird. What I have been using is input type email. And I expected it to be left-to-right automatically. Of course email is always left-to-right. But it's not. What we have food is stick it to be left-to-right. That is the preferred thing for email. Where did that --

JASON: Email? Email? Email. With this one, same thing?

MORIEL: That one we add to the input itself. That would mean that no matter if you're right-to-left/left-to-right, that input is always left-to-right. So... there we go.

JASON: Yeah. My extension is reading the right-to-left and sticking in the wrong side of the input here. But that's okay.

MORIEL: You could I think align the text to the right while still having LTR I think with CSS or something.

JASON: Oh, yeah. So, down here we would say -- let's go. Here's my styles. We could say... input, type, email. And we would go direction, right-to-left. And we would go text align.

MORIEL: It will never have direction right-to-left because --

JASON: This would be if the document has it.

MORIEL: Oh, that's right.

JASON: Will that do what I want? Let's find out.

MORIEL: Perfect.

JASON: Okay. So, I'm gonna go right-to-left. No.

MORIEL: But now your extension is reading it the other way around. Is that not --

JASON: That's weird.

MORIEL: I think it's because it's not properly -- so your extension is reading it --

JASON: Yeah.

MORIEL: Reading it --

JASON: I guess we could -- that doesn't work. This should work, right?

MORIEL: I'm not sure that text align works on inputs.

JASON: That could also be the case.

MORIEL: I'm not 100% certain.

JASON: Let's see what happens. I come in here and click this thing and we'll just -- we'll apply the style directly to it. Nope. That definitely works. So --

MORIEL: So, what happened?

JASON: So, why don't you -- direction, right-to-left. Do I need to like...

MORIEL: It should have worked. You're right. That -- oh.

JASON: Get out.

MORIEL: This is less. I think the direction, right-to-left, is above -- is above the, like, form -- above the wrapper of where you are right now. Because this is a less rule.

JASON: Wouldn't... okay. So, do it the way that you did it before where it was...

MORIEL: Well, oh. Ooo... maybe.

JASON: Is that -- because we don't have the direct --

MORIEL: Yeah, but we can also get it out of that rule. But, yeah, I think that should work.

JASON: Okay. So, let's try it. I'm gonna get rid of this important and see if it works.

MORIEL: No. No, no, no. I think you need to --

JASON: Wait, it's doing it now.

MORIEL: Is it?

JASON: Maybe I just needed to reload the page. I think maybe I'm needing to reload. That does what I want. Because now when I type in my punctuation, it's not trying to fight me. But it's on the right side. So, the alignment is there. That gets us there. So, that's a way to solve this problem.

MORIEL: Yes.

JASON: Now I want to check if this is a less thing or if I just needed to refresh the page.

MORIEL: I don't know. I thought that it was before the...

JASON: Right-to-left. Weird. Why -- I wonder why it does that? Because as far as I understood, this is --

MORIEL: Yeah, these are supposed to be equivalent.

JASON: This is the same rule.

MORIEL: Oh, no, they're not. Because the ampersand includes all the ancestors above. So, it includes both the form thing with the input.

JASON: Oh!

MORIEL: You're effectively putting it in front of them.

JASON: This is higher specificity.

MORIEL: Correct.

JASON: I get it, I get it. Cool. That makes sense. Well, cool. So, this is -- this is very exciting. I am -- text align right is not also flipped, fortunately. That would -- I would have to just walk away, I think. Like... [laughs] -- so, this is a lot. There's a lot to keep in mind here. And, I mean, we've solved like two problems and I feel like it took a pretty significant rewiring of the -- just the way I'm picturing these things. So, what -- let's see. We've got like -- knowing that we've got maybe 12 minutes left, is there anything else that you wanted to show off here?

MORIEL: So, I think that the biggest thing when you're looking at your own interface, especially when you're thinking about user-generated stuff. So, you're expecting input by users, their username may be mixed. There may be things -- I think that it's really important think about your UX in general. A lot of times thinking about the way that like right-to-left in languages would work would expose a lot of problems in general with your UX that you should just consider for your users. And really be thoughtful about what is interface versus what is your content. So, what should flip for right-to-left? And what should not? And what should be isolated**?

So, these are things that are kind of a step ahead of, okay, now I go in and fix it. There's so many ways to fix everything, and there's so many things that could go wrong or not wrong. It really depends on what is the website that you need to deliver? What kind of features do you have in them? What kind of interaction is your user expected to have? And try to make sure that you are consistent. So, don't show the user one thing that renders right in the editor. Renders one way, but then when they post it, renders another. Be consistent between those experiences. This is, I think, the biggest thing that I can -- I can say. JASON: Yeah.

MORIEL: That is also very problematic outside. But, yeah. We can go as deep or as, you know, you have like 5, 6 more hours? I don't know.

JASON: Well, so, maybe what we can do is rather than hunting down specific issues, are there places that people can go if they want to start seeing like how they can tackle these issues on their own? Or even just how to test this? Because one of the things I'm thinking about right now, as somebody that does not speak or read a right-to-left language, I'm not sure, outside of what we just did with won punctuation, right? I'm not sure how to even assess whether or not it's working because I can't tell when I set like none of this looks particularly out of place to me, right? Because for me, my brain is going, well, clearly this is the first character in this sentence.

MORIEL: Right.

JASON: So, is there like a resource for somebody who wants to test or who wants to kind of get a sense of how to even start breaking these problems down?

MORIEL: Yes, first of all, RTL:WTF. You can get the experience. Not only the experience, but there's a write-up for you go through the bidirectional algorithm that is aimed also kind of for developer and what it does. All of that. Don't feel bad if it -- because it might break your brain twice if you read it -- like if you both read it what it does, but also read it in a way that's aimed at right-to-left people like you see in this screen. You do have the bailout button that sends you to LTR:WTF. It's the same content, but it's more normally what you can read. You can read that. There's also a bunch of text areas down there where it encourages you to try to select stuff or try to add a space here. What would happen**.

So, kind of shows what happens programmatically. And there are -- JASON: Whee!!

MORIEL: Yeah. Oh, and it's great because it's different between you marking it with your mouse and you marking it with like shift arrow.

JASON: Oh, boy. Oh, boy.

MORIEL: Yeah. It's different in each browser.

JASON: So, this is weird. So, I'm currently -- so, I'm in -- I started in the Hebrew, right? And now I'm gonna do shift right. So, I'm pressing the right arrow. I'm now moving to the left as I press the left arrow.

MORIEL: Yes, because it's not the right arrow. It is forward, right? Or backwards.

JASON: Yeah. So, this is left, this is right. Oh, boy. That's... okay. Woof. All right. This is, yeah. Okay. So, this is a great resource. We should go look at this and get, you know --

MORIEL: And another really, really good website is RTLstyling.com.

JASON: RTLstyling.com?

MORIEL: Yep. This is resources we talked about. How to fix them. Problems that has to do with underlined links in Arabic that produces issues. Like things that -- letter spacing, logical borders, margins, et cetera. All of that kind of stuff. This is a really, really great resource.

JASON: Oh, wow, there's a bunch in here. Yeah. Lots and lots of good stuff in here. So, that's excellent.

MORIEL: Now we're getting boops. Actually, it's poops because I read them backwards, so...

JASON: [Laughing] -- aw. Well, okay. So, the chat has decided that we don't get to use the screen anymore. Moriel, thank you so much for hanging out with us today. This has been such a blast. I have had -- I feel like I learned a lot. I feel like I need to sit down and just mull this over, over a beverage.

MORIEL: Or a couple.

JASON: Yeah, a couple.

MORIEL: It's been a pleasure. It's so great. I'm always really, really happy to introduce people to the magical world of right-to-left.

JASON: Yes.

MORIEL: And get them to care about this. Because I think that's the most important thing. Thank you.

JASON: It's really, really cool stuff. And so, with that, one more shout, make sure you go and follow Moriel on Twitter. This is... this was fun, Tom writes backwards. Make sure that you are aware. We always have White Coat Captioning here. We've got Amanda today helping with the live transcription of the show. And that is made possible through our sponsors, Netlify, Fauna, Hasura and Auth0, all of whom are making this show more accessible to more people. You can always find that on the home page during our episodes. And then you can head over to the schedule and look at all the amazing things we have coming up. We have an absolutely incredible list of guests coming on to teach us. It's gonna be so much fun. We're gonna learn about Node CLIs, learn about MongoDB, about HTML and CSS for beginners. So many good things are coming. It's gonna be a blast. I cannot wait. Make sure you go and click this add on Google Calendar button so you can see more. And, you know, just for fun, you can also go and buy one of these rainbow corgi duck toys. Get your party corgi. Tell them all your problems. I'm going to be talking to my party corgi about all the things right-to-left they just learned. Need to think about that. If you need an emotional support duck, if you need a rubber duck to tell your code problems to, that's a place to go get one of those. I had a lot of fun making these. Chat, thank you so much for hanging out today. Thank you for doing some good boops. Thank you for sticking through the -- I am really struggling with the backward text in the chat right now. Y'all are too much. Thank you so much for hanging out today. Moriel, thank you so, so much for hanging out. I had an absolute blast. Chat, stay tuned, we're gonna go find somebody to raid. Moriel, thank you. We will see you all next time.

MORIEL: Thank you!