 Okay, so, hello, hello everybody and maybe two cats on the YouTube stream. Originally, I was going to talk about CSS colours, then I changed my mind lah because you don't want to talk lah, I ask you to talk, then I won't sell any highly changed mind. So anyway, I think it's going to be CSS for i18n. Why this talk exists? I actually got to give this talk before. It's just that, that's why this is like the more, less, anyhow, these slides cos like, you know. But anyway, I gave this talk once, then I get recorded. So I'm like eh, then record means there was no proof that I gave this talk before. So technically this is a new talk. Ha! But anyway, my vindictive personality crafted this talk as a passive aggressive reply because I once heard someone say, oh, internationalisation has nothing to do with CSS, what? Wrong! Okay lah, I mean, it's not. Ya lah, it's wrong lah, got lah, got relevance lah, come on. Anyways, so before we go into the details, we must first explain to everybody why is internationalisation i18n? You must understand there's this thing called numeronim. Numeronim means what? Means number based words lah, I think. Ya, anyway, I've created this handy diagram that help you count the number of letters in the word internationalisation just to prove that it is 18 letters. So if you see l10n, that's like localisation. Ya, oh my god, I must get rid of this imitating Uncle Roger's accent. So internationalisation actually a bit broad lah. But if you look at the W3C definition, the guidance is you design and develop in a way that enables easy localisation for specific audiences. So that's the broad one and they call localisation the broad range of customisations that includes but are not limited to things like numbers, time and date, currency, symbols, graphical reference and so on lah. So internationalisation is the design but localisation is the actual customisation. This is a broad definition lah, I think there's no set in stone one also lah but I think you all get the gis. But what this implies is that internationalisation is really more than just translating the content and then just like ah okay done, you're not done because there are nuances to the presentation of your content that will affect the experience of a native speaker using your site. My favourite energy to this is, I once played this video game called Sleeping Dogs. Some of you may have heard of it but at least I think Grand Theft Auto movie most people heard of lah. So Sleeping Dogs is basically just GTA but set in Hong Kong. So set in Hong Kong, if you've never been there, you'll know that predominantly Cantonese speaking. And then sometimes when you watch some Hollywood movies, you're like lah your movie budget is $500 million and you couldn't hire one native speaker of Cantonese lah. Cos I mean, okay, I may think of a language that I'm not familiar with at all. I don't know, Austrian or German or whatever. I mean, I don't know how it sounds like accurately. So if someone says something in a pseudo German accent, I'm like, I guess it's okay. But if you hear your own native language and you're like, oh my god, this person cannot speak the language. I think it's a bit similar in that if it's right, nobody really notices but if it's wrong, it's jarring. So that's the reason why lah. This is just like my passive-aggressive 2000 word response. Okay, this is the name slide, what is CSS? CSS is my cascading style shift law. So it's actually used for you, the developer, to talk to your browser, to kind of like, hey, browser, do this, hey, browser, do that. But when browser started out, CSS is not very powerful. So a lot of things cannot do, right? But today, as Vishak has shown us, CSS is now quite powerful, can do a lot of things now. My favourite quote about CSS is by Laura Shank, she calls CSS a domain-specific declarative programming language. She's kind of a nice, very pleasant definition. But like, if you ever use a website like Chrome, which has translation built-in, if you go to a website that's not your default language, Chrome will ask you, hey, do you want this page translated? And then, what do you know? Ask, hey, how come Chrome knows to ask you this? How come Chrome knows that, will know to ask, hey, maybe this person want the website translated? Or how come sometimes Chrome doesn't ask you when you learn on a language that is clearly not your own? This is a website implementation issue. If the website never use the lang attribute properly, then Google also don't know how to ask. So important, lang attribute. It's actually really very important. I don't know why this is not emphasised more. But like, the W3C has a whole, because there's a dedicated, they're dedicated working groups for internationalisation. And they do a very well-written comprehensive documentation. But I don't know, people just maybe don't know that they exist. So this is why they are trying to explain that, why is this particular attribute so important? First of all, language specific behaviour in browsers, like the example I just said, browsers would use this attribute for various things, not only the translation thing, which I know Chrome does, but there are other underlying logic that the browser will depend on the lang attribute if it exists to do. Things like font selection, of course, there's also SEO. That's not really browser. That's search engine specific. But that's very important. My favourite mis-use of a quote is that if you have a website and Google cannot find, does your website really exist? Ya, think about that. Philosophy. Of course, then there's spelling and grammar, translation, and also for, I couldn't, okay. I know one of my friends tweeted a link that they actually recorded, but if you use a screen reader and the lang attribute is wrong, oh my god, the accent is like, it's actually to a point where it's funny, ununderstandable but funny. So that actually plays a factor to folks who actually don't use the web, like most of us do as a visual medium. They rely on screen readers and text readers. That's quite important also. So the basics of how you use the lang attribute is that you put it on the HTML document. That's for the overall language of your document. And then if you have, and this is very common, you almost always have mixed language content, then you would surround that particular piece of text or content. And you wrap it and then give that the appropriate lang attribute bag. And so on the CSS side of things, not sure how many people know that this pseudo class even exist, but there's this thing called the lang pseudo class. And this selector is actually quite cool. Okay, and here we have this example. It's a mixed language sentence. So the markup is like this. You can see there's an Chinese. So the Chinese part, the second half of the sentence is a markup with a span tag for me to tell the browser that this bit is Chinese. So Chinese writing in and of itself does not have italic styles. So when you see this, at least italic style, it's like, no, that's not how we emphasise text. Let's put it that way. To emphasise text in Chinese and in Japanese as well, there's this type of punctuation. In Chinese it's called zong zong hao. I would guess you translate it into text emphasis because that's like what the CSS property is called. So okay, let's fix this first. Put it back to normal. Like none of these italic nonsense. And then you can use this text emphasis dot. So just a dot on below. I think Japanese does it above if I'm not wrong. So Chinese does it below. I use text emphasis dot and you can do that. But what I want to highlight here is that the selector I'm using is the Lang pseudo class. So I didn't have to explicitly put the Chinese language on the M. See, it's just a regular M but the browser can recognise that it wants to select that bit. Because of the Lang attribute, it recognises that this line, this chunk of text is Chinese in that sense. And what I want to talk about text emphasis is that it's not really just for Chinese and all Japanese. Text emphasis can be quite fun. You can do funny things like triangle. I don't know if this is like fluctuation in any language, but why not? I think there's a double circle. It's double circle, I think. Never, I got double circle. Take a little string. Ya, you only take the first letter. But I'm sure there are creative users for this. So that's kind of fun. So other ways to select language specific, we can fall back to the more commonly seen attribute selector. Attribute selector is quite versatile because you can sort of tailor how you want it to match based on whatever additional symbols you want to give it. So if you just do lang ZH, then okaylah, I only match anything with the attribute of lang ZH. But if you use this carat, I think it's called carat, maybe it's not called carat, like this pointy thing, whatever, it will match anything that starts with ZH. So you can ZH dash, HK dash, ZHONG, ZH123. Oh, also can, also can because it's better matching. And then if you use the type character, it will match ZH with a dash. Yeah, so anything ZH dash will go as well as ZH itself. So some things to note if you want to use the lang pseudo class is that the three attribute selectors I covered just now actually you just use the lang pseudo class, settle already. Actually if you're doing language specific, I really lean towards recommending using this lang pseudo class for everything. In terms of, because the logic, the logic behind how the browser passes the selector is different if you use the pseudo class versus the attribute. So if you use the attribute, it's a comparison against the attribute on the element. But when you use the lang pseudo class, the user agent actually relies on the document semantics for the comparison. So it's kind of a different bit of logic. And if you really want to, you can just create a normal CSS class or even ID for some, I'm sure there's some use case for it. I can't think of one now. Like you can create a class called znh if you wanted to. But then then you have to go and like one by one go and labour your elements with those classes. It's kind of you're not making use of the convenience. So if it's me, I won't go the pseudo class route. Yeah, I said that. So now that we know how to select the language that we want to style, they are quite a number of CSS properties. Like all of the 500 plus CSS properties. It's a good chunk that helps us sort of like fine tune the presentation of content. So a lot of these are typographic related, of course. So I think the next few is mostly typography related CSS properties. So one of the things that CSS allows us to adjust these days is these four fonts problem because browser actually very helpful. Like if you use web fonts, right, then sometimes the font you only uploaded one way or you not enough money to pay for the other way. Oh, so sad. Oh my god. No operating budget. Anyway, if the if the font doesn't have the relevant font file for a different way, a heavier way lah or even a different style like in italic, right. Browser will try to synthesize. They're like, I will, I think this is what they want. Let me try and just like sort of quick, quick this regular font file to give the author the effect that he wants. The designers and the font font designers specifically were like if they are dead, they will turn in their grace because like oh my god you ruined the font. I know like maybe some people won't notice the difference but you know it's about the craft we know very important. So you can use font synthesis to just tell the browser it's like okay I know you want to be helpful but don't need so you just say font synthesis none and your browser will leave your font alone. Yeah. Then there are so glyph differences. So I try to blow this up as much as possible. Actually I'm not sure if the Arabic script and the ligatures have this behavior as well because I'm not familiar I'm familiar with hand characters. So if if the script we are using has hand characters maybe Japanese or like Chinese right. So there is the same how do we how should we explain this? It's the same character but a different glyph so the one on the right is the simplified glyph the one on the left is supposed to be the traditional Chinese glyph and this is one of the things about about Chinese writing right there they are they are simplified and traditional Chinese glyphs that the the character itself right looks completely different one like one is really like simplified I really had less strokes and then there are some where the character is still the same but when you design the font right is different so if you look the language is hand s for simplified and then the one on the right is hand t right there are these tiny tiny liter differences if you look inside like if you can speak Chinese right the yue part of the of the character the design different and and the the browser can pick up on this and present the correct glyph if you if you tell it to if you tell it correctly so okay this I know I said like most CSL properties a bit general this one very specific because I just for it says so it says so in the property it says East Asian so you know it's just for East Asian and so this is I won't dive into the unicode part of this because that's actually very interesting but very very very very long winter I can just say that this particular property right lets you toggle toggle what glyph to use um if you have to like adjust your text in a hurry um why do I say this because the they are unicode quote points that will only that represent only that traditional Chinese glyph for example but the versions that I'm using here are the type that can where this particular property can apply one so okay the default is is simplified if I spell traditional correctly I think you can see that the glyphs change and I just like doing this sorry um so earlier when I said like for Chinese there are specific glyphs that the character just looks different even though it's the same character like we use it the same it's red the same it's just written differently right just like this one I highlight right it's just one of those so the like the number of strokes is like significant different but anyway this property that's you talk about that and then so if you're using Japanese right Japanese i think the way they split they are they are they are they are they are they are what should we call this character set up into groups is based on they are they are J-I-S standard Japanese industrial standard basically it's like a national standard like uh I think mainland China they call it ko piao so it's like a standard like a set of of character lives that go into that set one so for Japanese you can actually toggle okay my text it's not Japanese so it doesn't really but it's like J-I-S something there's a there's a number behind it I think there are six sets so this this lets you toggle that also there's also not four language over right this is specific to the the style the typographic conventions I didn't have a good example myself so I just stole this from the spec so apparently like Macedonian is not a very common font that people design from for but like they they have like similar characters to Serbian so if you need the type of like how should we put this like the typographic conventions that apply to this particular script right this Macedonian script you can use font language over right and set it to the language that does have it but the browser itself can still recognize that oh it's this is just stylistic the language itself this text itself is still in Macedonian even though is presented using the the Serbian typographic conventions so this this font properties are really trying to to give authors more tools so that they can create much better international experiences like as long as you're not using English right there are definitely things that you need to take care of and now this these are relatively new right is in font's level 4 so they're trying to push more and more of these properties that that let you tailor to your mother tongue like where necessary i think this is a good thing ah thanks Raphra actually a lot of us use text transform but this is just small like fun fun effect usually we use a text transform for adjusting case or like capitalization but they are they are very language specific case mapping rule so like if you look right this is a this is German so the German asset right when you change to upper case the the asset become a double S and then Greek also Greek also got this kind of thing if you look at the the Greek vowels they basically the glyph i think they're supposed to either i don't know lose their accent or something but yeah the the glyphs completely change and this is these are language specific tweaks that that css were impact okay even i'll go back to Japanese right Japanese has this uh ruby annotations you see we see this more in Japanese than Chinese these days but Chinese also use ruby it's like for for annotations like hand repeating annotations on thought on the pitch right so if you do things like full size come up and then it also change like you can use text transform for these things i just like doing this like picky day in life okay moving on moving on oh my god i still am more older than five years old um okay this may be may sound irrelevant but got got point one got point one you all just tahan me for a bit here there's a line of facts uh pop quiz question don't have to answer to me answer in your own head how many line boxes are there the correct answer is five why five because you don't have the markup right even element with one line box the m one another line box that's two was it the third line box really there fourth line box at all question mark fifth line box five line boxes okay so now is uh gonna space everybody happily existing on the same line but we blow it up right then now no space how how now your line box will break off so this break here right is is is a is known as a line break and and these lines are broken uh based on how the content behaves so this is a this is a soft soft wrap break so when wrapping is enabled the user agent has to minimise the amount of content overflowing a line by by wrapping the line at a soft wrap opportunity so soft wrap opportunities depend on language english okay got space means you can break if you use for chinese right every character also can break but not all the time because they are they are punctuation rules that like certain things cannot start or end a line also got so that there's a bit of ambiguity there tie if you happen to speak tie tie tie breaks are even more arbitrary not say arbitrary like but if you don't read tie then it feels arbitrary so all these right are really very unique to each language and the browser is actually smart enough to to detect this which i think is quite amazing so there is CSS for controlling line breaks all of this i suggest if you are interested because i would think most of you probably don't but if you happen to be interested dot CSS talked by Florian Vivoile and dot CSS 18 minute talk so also not very long goes into detail about all these different different line breaks specific CSS hyphenation is one of those things i don't know people don't really talk about it a lot but this is one of the things that a lot of thought had to be put into it and hyphenation behaves very differently also depending on the script so actually this entire topic to me is very intriguing but like if if you're not interested also never mind you do you right just just putting it out there their resources but if you do not give a language attribute you don't get automatic hyphenation because the browser needs to know what language it is before it knows how to hyphenate yeah because language specificationary so that's that's one thing to take note of again highly recommend that talk okay this is we move on we move on from word level to layout level so my one of my favorite css 50 writing mode writing mode yeah yeah default writing mode for the web is horizontal top to bottom very logical explanation web was born at CERN official language at CERN is what English and French English and French how to write horizontal top to bottom low so okay this is a explainable phenomenon this on the left this is Mongolian the traditional Mongolian script not the not the Cyrillic one so this traditional Mongolian script is read left to right vertically and then Japanese Chinese traditional then you can write it vertically but you run right to left so you can do this fairly straightforwardly using the writing mode property yeah before this i i have i no idea how you do this i don't know like yeah i don't know do you space do you just like space space space space i don't know i cannot imagine but now it's nice now i'm like legit so this is in conjunction when you use writing mode you have this sort of like a complementary properties is to adjust the glyphs so when you write Chinese character or vertically the browser knows that oh this is a language right that can be written both ways so i will the browser knows that okay i will keep the glyph upright so the default for Chinese characters when you do vertical right it will be upright but for for languages that are you know horizontal by nature the browser will just rotate them because it really doesn't make sense to to keep that upright but in the event you do want it upright for example abbreviations right then you just say oh yeah yeah this bit this bit high browser just just like you know make my letter stand up please so you use text orientation then you can make it stand up text combined upright is also useful is a useful typographic behavior because i say like you know mba is kind of it's kind of short right yeah la la la i can kind of squeeze it la squeeze squeeze into this like square character space and then you use text combined upright the full spec would should let should limit this to two to four but for now browsers just like i think they call other priorities they say i just do all so if you wanted to put all basketball browser will just squeeze like basketball into that space then it just looks very squeezy la so this time you use your own description but yeah if you are dealing with vertical text you can use these things to tweet quite useful quite so right to left languages CSS should not be used here this one this is a unicode guidance and and and uh again unicode in and of itself very fascinating topic one of these days right should get someone to expert to come and talk about it but the the rationale behind it is is because first of all there is a unicode bi-directional algorithm and um so the browser already implemented that and and the directionality like this is a lot of text but the long story short is that CSS is fleeting so there is a chance that CSS doesn't load or fails the the presentation on the content should not be reliant on something that is like there is a potential that is unreliable so you should not use um CSS for bi-directional styling that that i think my slides i got shared there's this thing called the unicode standard nx number nine that it goes into a lot of detail um so the recommended solution is you use the dir direction attribute set it set it on your markup to define the base direction of your text that's the that's the that's the safest because if your html don't load then you see nothing also so there's no chart that is displayed wrong mah right then yeah okay so vertical writing this is my spiel to people who don't like ah yeah vertical writing not applicable to me but i mean if you you know do this like more graphically like you know poster poster stuff like we should talk about just now vertical text in graphic design is like very common lah come on so yeah yeah you can do this in in in web design this this particular example is russia and is russian in like 1920s so people have been doing this for years so it's not like this like new fangled new age-y thing okay oh well yeah anyway this is done in css i mean it's not great but i think it's not that bad lah um so physical directions for for writing modes other than a horizontal can be a bit confusing which like let's say okay horizontal right you use top bottom left right that's great right like i want to give a bit of padding i say what i say padding left but then or if i like change the writing mode to something now like eh i want to move i want to give it some space hat one ah like here speaking too close hat one ah actually i haven't given this talk in so long ah that i literally really don't know what i was supposed to do so the let's see padding padding top 2 ah okay padding top shift it down then eh no no no actually i want to i want to shift it away from the left okay ah padding stop padding bottom padding left bahwa eh but the fact that i do think about this right it's like it's very leje so physical directions of top bottom right left can be a bit confusing i would say this is why we got like logical properties and i want to let refresh layout problem there we go so there's mapping instead of top right bottom left the indicative direction is based on block and inline so block basically just means the direction that your blocks of text flow while inline is the direction where the your letters go um actually it's easier with a diagram which i don't think i included but logical properties is something that is is i feel very useful i don't have a good example oh yes i included the code pad amazing um yeah so if like you had you use physical directions right then your styling things if you're using top left bottom right right every time you change the direction on your code must change right like top border top color like if i wanted to keep my my orientation on my border colors with respect to my text right this is this is all the crap that i have to do oh my god but if you use logical directions one code kauteam no matter how you up down left right or um the code source itself out for you so so that's that's a i feel that's a big that's a big plus point for logical directions yeah okay more more i atn and fun stuff is uh least encounters because numbers are not only the traditional one two three four arabic numbers that we are used to so if you want to be like have more variety in your ols uh ada banyak pilihan ada banyak pilihan dari kisah saya saya tidak ingat jadi saya hanya akan membawar tidak ada roman sangat menarik ah okay mari kita lihat oh okay saya harus saya harus saya perlu lakukannya saya perlu lakukannya ha keadaan mereka ini bermakna jika anda menjelaskan iya tidak menjelaskan iya dia seperti apa ini yang menarik saya tidak tahu Tian Tian Tianzu Tian Gan ayah Tuhan tahu apa tapi iya saya dapat saya rasa ada perjalanan tersebut saya hanya tidak ingat ini sangat menarik seperti iya apa yang lebih menarik iya saya rasa kita masih dalam pilihan CSS tidak CSS seperti pilihan kerja seperti kita harus mengalami ini atau tidak kerana pula ia seperti satu dua tiga tiga empat tiga enam enam tiga enam tiga enam tiga tidak lagi sudah jadi sekarang pilihan hanya hanya hanya tidak dan kemudian saya rasa pilihan yang kita dengar adalah seperti sepatutnya kita hanya memperbaiki seperti mulai lagi dari pertama atau kita seperti pilihan dan melakukan ini ini seperti masih dalam pilihan jadi um iya perkara seperti ini sebelum kita perlu mempercayai apabila kita melakukan pilihan tersebut mengapa saya memperbaiki ini saya tidak perlu melakukan ini iya iya saya tidak perlu melakukan ini dengan i18n tetapi saya hanya ingat bahawa ia menarik bahawa anda boleh melakukan pilihan tersebut dengan CSS saya tidak tahu sekarang apabila orang tidak ada pilihan tersebut biasanya menyebutkan anda untuk pilihan kerja anda yang menyebutkan anda untuk memperbaiki pilihan Twitter dengan kita jadi ini mungkin adalah pertanyaan pertanyaan tetapi jika seseorang menyebutkan anda melakukan pilihan tersebut betul anda berkata saya boleh melakukan ini dengan CSS iya kerana mempunyai pilihan tersebut cukup menyenyakkan iya menyerah saya rasa itu adalah tentangnya iya jadi ada beberapa pilihan tersebut pilihan tersebut algoritma yang sangat menarik jadi jika anda mempunyai masa saya boleh pergi iya terima kasih selamat tinggal