 The next has implemented position sticky, which is a new way to position elements and is kind of similar to position fix. So the link to the update is in here in our github account. Another thing is that there was this really nice article about CSS round display. So CSS round display in case you guys didn't know, it came about because of all the advent of all the wearables that recent years and a lot of the wearables, especially if they are watch faces, they are round. And until there has been no CSS that can cater to a round display. So this is how the entire spec came about. So you can read that the level one editor's draft, the link is there also. Firefox and Chrome have been updated this month as well. How do I stop this? Ya, they've been updated as well. So Firefox 50 has come out and they are more developer related updates. They are interesting. So one of the things is that the web console now understand source map but it's disabled by default. So you have to go into settings to enable it. And the box model view has been moved to the computer view. There's a screenshot in the link. For Opera and Chrome, the CSS tag size adjust which has gone in and user select is now unprefixed. So not very fast month but that's it. So then, okay, then that's me. Next is me. Okay, I am going to talk about this. So today I'm just going to introduce a bit about Chinese typography. I know even though not every, like, the percentage of Chinese people here is not that much. But you know, being that fast Asian and all, I'm just representing a bit of Asian culture. Okay, so how this came about actually was quite interesting. I don't know if you guys know who is Jen Siemens, but Jen Siemens is a developer that I respect a lot and I really admire her work. I think she's currently working at Mozilla and she's really big on CSS and CSS layouts. Actually, together with Rachel Andrew is in the audience today. They are like the one-two punch of CSS layouts. So Rachel will be joining us for a fireside chat after this. So I'm going to make this quick. So basically, Jen Siemens does a lot of talks about how to do layout with modern CSS techniques. And one of the things that she covers is something called writing mode, which, like, most of us are used to, especially because we go on the web. The writing systems that we're used to is the standard Latin-based horizontal top-to-bottom. But if you are like me, you know, you're Chinese, we, there are some, well, Chinese text is laid out, some from top to bottom, right to left. And there are also Hebrew scripts that are right to left instead. So basically, writing systems are all manners of directions. It just happens to be that we are used to seeing only one. So before writing mode came about, or you couldn't really, you couldn't really do vertical layouts or even, you know, right to left layouts without a lot of, like, hacky ways. So basically, I built something. So I was riding my bike and then I somehow felt that, I felt compelled to build. I was like, why can't we have, given that we have responsive web layouts now and everything, why can't we have a Chinese layout that is right to left? Because sometimes when I'm on the train and I see people reading Japanese or Chinese novels, it's top to bottom. But I remember when I was younger and this is more for like novels, so like Xiaoshuo, right, they would be laid out in vertical layouts. So they're this small, I don't know if I'm the only one who actually read these things when I was younger. It's really just like fiction novel storybook. So they are like about this size and they are really read from right to left and they are laid out vertically. But I hardly ever see them anymore, actually. So even now printed books mostly is horizontal layout. So I was like, I'm pretty sure we can actually do this on the web just for fun. So I tried to build it. This is how it looks like. So you can read it. It scrolls horizontally. Then I thought like, why not just switch? So you can switch it back to the standard horizontal layout if you want to. But why would you? Why would you do that? Let's go with this. So one of the interesting things before I go into the actual code and the CSS, I'm just going to talk a little bit about, okay, I'll really talk about this, Chinese characters. So for the benefit of those of you who aren't Chinese, there are actually two, I'll call them versions. There's a traditional Chinese glyphs and there are simplified Chinese glyphs. The actual history of how this came about ties in very closely to the history of China. So I'm not going to go into that. Just know that if you can look at the third line, the four words there, the first set is the traditional style and the simplified set is the latter one. As you can see, the simplified version has less strokes and it's simpler to write. But essentially they are read the same. They're pronounced the same. They're just written differently. So if you can imagine, for the Chinese language, Chinese is the only logographic language that is commonly used in the world today. Logographic meaning that each of the glyphs can by itself have meaning or when they're used in combination like maybe two glyphs to become a phrase or four to a long phrase or an entire sentence. But these glyphs have meaning as opposed to let's just say English. It's more of a phonetic thing. Basically what the alphabets represent is how the word sounds. So from Chinese language, you can imagine, I personally cannot even remember learning Chinese but I can imagine if someone were to learn it later on in life, I think it would be quite challenging because there's a lot of memory involved and it means something. So for a typical font phase, a typical Chinese font phase, there's about 20,000 glyphs and that's for simplified. So a traditional Chinese font phase probably about 30,000 glyphs. So if you've ever tried to use a custom Chinese font and you download it, you realise that it usually goes in the megabytes. So that's why actually on the web, you don't see a lot of custom fonts being used. We just go with system fonts and now it's still not very viable in terms of performance to actually use Chinese characters. So just a very quick run-through about the different types of Chinese fonts because when we talk about Latin-based typography, we go with serif or sans serif. So that's the two major categories. For Chinese fonts, there are a bit more than that. I classify them into six different types. So the first one is called Songti which is sort of but not really the equivalent of serif. So as you can see, it's the kind of like miniature serif but you can't really call them serif but this is the closest equivalent to a serif font that you can get for Chinese. Then you have the sans serif equivalent or heyti. These are the sort of two if you want to look at it that way. My slides have been cut off but the Ming Liu and Sim Sun are the system fonts that you can use if you want to have a so-called serif look. For heyti, there is a Microsoft ya hey or sim hey. So for the English speakers who are thinking, what are these nonsensical fonts in my font dropdown and they are taking out space, I'm sorry they are for Chinese fonts. Then we also have khayti which is like the script font. Personally, I kind of like how this looks because it looks calligraphic. I think it looks very nice. So the English equivalent I can think of is a script font like cost calligraphy. So if you see the words khay in any of your fonts that's the font that you're looking at Yuan ti. I would think it's like a rounded sans serif font. Sorry? It's not rounded. I don't think it's the equivalent of comic sans but it does look very friendly. Let's put it that way. So yeah, we have Yuan ti and Fang Song ti. Fang Song ti what's the difference between Fang Song ti and Song ti? The difference is that for Song ti the horizontal bars are really straight but these are slightly slanted so think of it as a more pretentious version of Song ti how about that? We also have the display font so all manners of whatever but these are usually more challenging to use online because again as I said one font file is going to hit you 1 2MB so we go with system fonts so if you want to use Chinese fonts there are two web font services available just font I think one is from Taiwan and one is from China so I think just font is the Taiwan one and Youzi ku is the Chinese one but it involves more you still have to put in like JS it's not as simple as Google fonts that you can just declare at font phase and anything but they are constantly working on it like I first heard of them about 4 years ago and there have been a lot of updates to their services since so this is something that if you're actually you have to build a Chinese language style or anything and your designers like give you some ridiculous designs it's something to consider that it's a possibility instead of just starting 2 custom fonts for you ok let me look into it and one last thing about using Chinese fonts is you want to declare your target English fonts first because even though you're building a site completely in Chinese, there will still be cases where you end up with alphabets either for labels or maybe numerals or stuff like that and if you don't declare your English fonts first it's going to end up rendering in the Chinese font version so if you're using I think the fallback Latin characters for Chinese fonts doesn't look all that nice it doesn't look very nice so if you declare your English fonts first if the Chinese doesn't exist in your English font then it will just fall back to the Chinese font which is what you wanted to begin with and your Latin based characters will be in the nice font that you chose for it to begin originally so that's that so the terminology about writing mode is so you have what we call the line orientation which is the how your characters, whether they are upright or sideways so that's line orientation block flow direction is how each block is rendered on the screen so the normal one that we are all used to is horizontal TB which horizontal top to bottom from top to bottom now the other two would be vertical right to left so as you can see the text flow and the block flow direction are different the text flow will always be the same it's always clockwise 90 degrees but the block flow direction would be different for left right versus right left so then the way the ring engine rotates these characters when you change the writing mode there are two ways you can do it so for CJK stands for Chinese, Japanese, Korean for CJK font intrinsically the characters know to stay upright when you change the writing mode so when that's why for Chinese characters you don't have to when you declare the writing mode to change the characters just so the one on the left they just translate downwards but if you apply writing mode vertical to typical Latin block of text it actually rotates so your characters just do this 90 degree rotation but there are certain CSS rules that allow us to actually change this orientation as I will show later so the three rules that I am just going to briefly touch upon that can do all this typography manipulation first one is writing mode so there are five values that you will take horizontal TB which is the default and the one that we are all used to then there is vertical RL which is vertical right to left that means so if I didn't do anything to 1987 it just stands on its side so same goes it is vertical left right and then you just read it from left to right instead so there is an asterisk there because the spec is still being worked on and this may or may not be dropped off but as you can see you can actually make the Chinese characters which are actually intrinsically upright you can actually make them turn together this probably won't apply to Chinese text because I don't know why you want to read it that way because you can't really read it that way but I think for some other languages they are applicable so there's a sideways I think they might still be debating on whether to implement this into the spec for certain but the first three are confirmed so then after that we have the text orientation so as I mentioned just now you either translate your glyphs or you rotate them FYI that's my name in Chinese couldn't think of better words to use I'm sorry so the text orientation property there are three values again the default is mixed so by default you can have upright and you can have rotated as well you can force the digits to go upright by setting text orientation to upright so for this particular example I actually wrapped the 1987 in a span and then I applied text orientation upright to it so that's how for later there will be another property that cater specifically for digits and then finally that's the sideways orientation but this one text combined upright so this is an actual use case because if you are in Taiwan or Japan the year system that they use is so Taiwan will use something called Mingguo and there's history to that so I'm not going to touch into that but there are years at least for now it's not four digits so in fact before I can't remember but they were recently just got into the hundred so it's recently just became three digits and if it's three digits you can still sort of just squeeze them into the space of one glyph so you can do that by actually combined upright so what text combined upright does is that whatever is wrapped within that rule the browser will try to render it in the space of a single character glyph I have not tried the extreme use case of squeezing in six digits but so far for three digits it kind of still works I think for the Japanese character Japanese years they are still on two digits so actually it looks quite nice it's a standard date and month actually it fits quite easily inside the space of one character so for that particular property you can use digits integer to specify how many digits you want so minimum is two, maximum is four I guess they thought about the extreme use case of six digits as well but right now it's not implemented in any browser so all just means it's going to squeeze everything I should go and try this later and update people what happens if you put six digits in it's probably going to look horrendous so these are the three properties I came across when I was trying to build my funny switching demo so what I realised if you're going to lay out text in Chinese there are some typography but when we do for English sites there are some standard rules your character length should be 45 to 75 things like that for Chinese text there are some slightly different rules so the first one is obviously to use and declare the correct font family there's a difference between traditional Chinese font and simplified English simplified Chinese font written in traditional Chinese and you declare a simplified Chinese font there may be cases where certain characters won't render properly because it doesn't exist in that font family because I mentioned there are actually more glyphs for a traditional Chinese font so you may or may not run into the problem depending on what you're writing so you want to be cognisant of that whether your actual text the text that you're inputting in HTML what is it? Is it traditional Chinese simplified Chinese? and also you want to make sure that the font size is large enough because Chinese text is kind of dense and it's kind of compact and if the standard font size of 16 I find is a bit too small especially if you're going to read it on a screen, a backlit screen it actually makes sense to make it larger in fact some English sites already suggest 20 it's a better font size so for this I say you make your own judgment call and line height actually line height the standard English suggestion, I read it somewhere it was about between 1.2 to 1.4 for Chinese text it's not enough because as I mentioned Chinese characters are very dense so you really want to set it a bit further apart it's really hard to read use text align justify because each character is a square if you text align justify it makes everything much neater and for a visual perspective it's a lot more comfortable to see as opposed to if it's not aligned so can you imagine the grid it's not even following a grid if you use text align justify it kind of aligns the text back into a grid it's comfortable to read so my take on this was if you keep it to 30 to 40 characters it's actually quite good for reading I'm taking the cue from as I mentioned those novels that I used to read as a kid they were about this size so that's that and for paragraphs because in Chinese for print in Chinese the paragraphs denoted as such by leaving two character spaces in front of each paragraph but for web and there's this because the W3C actually has published a very comprehensive document on the requirements for Chinese text layout and in there it does mention that even though the two character space is suggested mostly for print web reading they suggest to go for just larger spacing per paragraph and just let all the text indent be the same so we can go with that I tried going with the two character indent it looked a bit weird to me Japanese text actually just indents by one character so I don't think there are any hard and fast rules I guess go with what visual style works for you so so all the links to the relevant research is here on somebody actually created a framework which is the very very last link it's read which is actually this set of CSS and JavaScript to sort of settle your typography for you so again it's a framework if you are doing a majorly Chinese website and you want the typography to be set properly this is actually not bad for my little experiment my styles are minimal so I don't need a framework for this that's that so then I guess you are sick of me so we can actually move on to the main event which is the fireside chat with Zelle Rachel who is so gladly agreed to this even though she looks so tired I'm so sorry and Chris