A presentation at CSSConf.EU 2018 in in Berlin, Germany by Chen Hui Jing
In the grand scheme of things, digital is still relatively new, compared to thousands of years of design on analogue mediums. The web as a medium has reached a new stage of maturity that allows us to translate designs from traditional mediums like print, onto the dynamic web. Hence, layouts no longer have to only run from top-to-bottom, left-to-right. Modern CSS provides new tools that allow us to explore and create designs that break out from cookie cutter layouts.
Hereโs what was said about this presentation on social media.
Wow, there was *so* much fantastic content in @hj_chen's #CSSConfEU talk about the web as it's own medium. Go check the link to the talk she gave - I just learned so much ๐ฏ pic.twitter.com/h5oxr4Gw5P
— Chris Adams (@mrchrisadams) June 1, 2018
@hj_chen's enlightening talk about the complexity of typesetting Chinese, vertical layouts and CSS writing modes. "Typography: East Meets West". #CSSconfEU pic.twitter.com/WrztVttOpa
— Nabeelah Ali (@nabeelahali) June 1, 2018
Excited to see @hj_chen talk irl @CSSconfeu such great energy and inspirational demos of #cssgrid ๐ปโค๐ป#learntocode #webdevelopment #design #layout #typography pic.twitter.com/fvQuNEowx2
— Jessica Greene (@sleepypioneer) June 1, 2018
Amazing to see @hj_chen present at #CSSconfeu about web typography โ such an important topic and what an attentive crowd! ๐๐ #moztechspeakers pic.twitter.com/SurU15o5KC
— Mozilla TechSpeakers (@mozTechSpeakers) June 1, 2018
Go Swiss Design and Bauhaus in web! Inspired by @hj_chen #cssconfeu
— Katerina Loschinina (@kate_loschinina) June 1, 2018
Damn this talk by @hj_chen is seriously freaking good. Covered a ton of ideas but with rock solid demos to back it up. #cssconfeu pic.twitter.com/8ew6Etd6Av
— Glen Maddern ๐ (@glenmaddern) June 1, 2018
A tour de force in all the things I love and want to learn more about: languages, writing systems, typography and design @hj_chen #CSSconfEU pic.twitter.com/0zqwEBa660
— Dora Militaru (@doramilitaru) June 1, 2018
Just heard that we have aspect-ratio media queries which can be pretty useful for responsive layouts: https://t.co/BFPNvb9Yhg
— Michael Kรผhnel (@mkuehnel) June 1, 2018
Thanks to @hj_chen for sharing ๐๐ผ#CSSConfEU
Frequency of majors browser releases (by @hj_chen) ๐ฑ pic.twitter.com/RapSqaNq5k
— Cristiano Rastelli (@areaweb) June 1, 2018
Amazing @hj_chen is in #Berlin!! ๐๐๐ https://t.co/Xi1MrE8wIo
— Sandra ๐ฆ #SFAllHands (@SandraPersing) June 1, 2018
"The grid is real"
— Laura Carvajal (@lc512k) June 1, 2018
๐ฅ
Learning about layout and text flow with @hj_chen at @CSSconfeu pic.twitter.com/N5LyV8qUtS
@hj_chen is teaching us about how flexbox, CSS Grid Layout & Writing Modes can be used for right-to-left scripts as well as opening up many artistic layout choices. @CSSconfeu #cssconfeu pic.twitter.com/tp7hxKHtrE
— Sareh (@Sareh88) June 1, 2018
Now thatโs an epic CSS Conf. @hj_chen rocking @cssconfeu pic.twitter.com/IPbMXzEbzA
— Rachel Nabors ๐ @UX/CSS Day (@rachelnabors) June 1, 2018
I could watch @hj_chen show typography on those big screens all day pic.twitter.com/jYNkwsjuCV
— Kriesse (@kriesse) June 1, 2018
.@hj_chen talk on writing modes is awesome. A great blend of introduction to CJK languages, the properties themselves and design inspiration for all languages. #teamLayout #CSSConfEU pic.twitter.com/2GX1acDmmO
— Greg Whitworth (@gregwhitworth) June 1, 2018
Web typography: a tour around the world of characters, symbols, emoji and how CSS works for different way of writing text by @hj_chen #cssconfeu pic.twitter.com/TCmFi1AHZG
— Cristiano Rastelli (@areaweb) June 1, 2018
And here goes @CSSconfeu and ๐ธ๐ฌ represent @hj_chen ๐ pic.twitter.com/IfQXNi32jP
— CSSConf.Asia (@cssconfasia) June 1, 2018
Definitely gonna try the feature specific queries, thx @hj_chen #CSSconfEU
— Sandra (@alexhris) June 1, 2018
@hj_chen showing how important, and challenging, is working on alignment and different writing modes. I know it pretty well :) but the implementation of the CSS Box Alignment has improved considerably during last year #CSSconfEU
— Javier Fernรกndez (@lajava77) June 1, 2018
Raising bugs with the browsers shows browsers that developers wants to use a feature!
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
Raising bugs is a win. @hj_chen #CSSconfEU
Feature-queries allows you to check if a browser has support for it.
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
It allows you create enhanced design css for features and doesn't make it browsers specific for when things turn up. @hj_chen #CSSconfEU
Design for aspect ratios, not absolute dimensions @hj_chen at #cssconfeu
— K. Adam White (@kadamwhite) June 1, 2018
@hj_chen delivering interesting facts about chinese characters #typography #ๆฑๅญ i'll cover this a tiny bit as well in my talk tomorrow... #ๆ #CSSconfEU #jsconfeu pic.twitter.com/aTSIF2VmBe
— hannes (@escapedcat) June 1, 2018
A delightful talk from @hj_chen, on typography (including vertical layouts) including playing cards for CSS properties ๐ #CSSconfEU pic.twitter.com/vZaAFsW1tx
— Keith (@keithkurson) June 1, 2018
Iโm loving the talk by @hj_chen about typography ๐ so many memories from my typography and print classes at university ๐๐จ #CSSconfEU
— Laura (@alicetragedy) June 1, 2018
I โค๏ธ how differing life experiences influence web design. @hj_chen draws parallels between her basketball experiences & using CSS at #cssconfeu ๐ pic.twitter.com/I2RYzXGTi9
— Amber Wilson (@ambrwlsn90) June 1, 2018
Deep dive into typography by @hj_chen at @CSSconfeu pic.twitter.com/3iHDWxmH9C
— 22nds (@_22nds) June 1, 2018
Backpfeifengesicht wasn't a word I expected to see in @hj_chen s slides ๐ #CSSconfeu
— Manuel Matuzoviฤ (@mmatuzo) June 1, 2018
So excited about @hj_chen's talk! ๐ #CSSconfEU pic.twitter.com/yXrEAvAv03
— /ola npm i #sfallhands (@misprintedtype) June 1, 2018
I am absolutely fascinated by @hj_chen talk at @CSSconfeu, must watch for everybody, who is into languages || layouts! #CSSConfEU pic.twitter.com/bGq4PXaNxJ
— Brinka (@s_brinka) June 1, 2018
Now I want all of these trading cards. Might need to have print them out, @JoseRosario95 a special thanks to @hj_chen's attention span ๐ #cssconfeu pic.twitter.com/uVSgmji8VL
— Rita Dias (@arita_dias) June 1, 2018
Inspiring talk by @hj_chen at #cssconfeu about Team Layout in CSS. Check out her codepen for examples! ๐ pic.twitter.com/wVdIl8zBRP
— ๏ผcode๏ผmonauts (@codemonauts) June 1, 2018
So good to see these features presented by @hj_chen as they allow for loads of interesting new use cases and are applicable in tons of practical ways. Contrast that with i.e. those responsive logos we saw a few years ago, which were nice but not super applicable. #CSSconfEU
— Bastian Albers (@bastianalbers) June 1, 2018
You can submit bug reports to all browser vendors or to https://t.co/JvbbAZ3nyo.
— /ola npm i #sfallhands (@misprintedtype) June 1, 2018
Both options help the web so much. ๐#CSSconfEU pic.twitter.com/2vZzhixdCw
@hj_chen speaking about layouts and specially the secrets from grid layouts! #CSSconfEU pic.twitter.com/xpCIFC4Lpo
— Adriร Doz (@adridoz) June 1, 2018
This was sooo interesting! I esp love how enthusiastic @hj_chen is, exploring how the CSS allows us to implement advanced typographic features and multi-directional layouts, that benefits internationalisation.
— Rebecca (@I3ekka) June 1, 2018
CSS Grid FTW. ๐๐#CSSconfEU https://t.co/TJURh9DhzN
We can now bring Bauhaus style designs to the web - using a team of css properties. @hj_chen #CSSconfEU
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
Can I please get the team layout cards from the @hj_chen talk as physical cards? #CSSconfEU pic.twitter.com/8P3142rqWs
— Bastian Albers (@bastianalbers) June 1, 2018
You can use flex-direction to change the flow of content.
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
You are not limited to let tot right.
This ONLY effects the visual order. Not the content order. @hj_chen #CSSconfEU
Logical properties #CSSconfEU pic.twitter.com/iUtqUJ70GL
— /ola npm i #sfallhands (@misprintedtype) June 1, 2018
Fun to see Gaeilge make an appearance at #cssconfeu in the form of ghrianghrafadรณireacht (photography) in a talk about web typography ๐
— ?- stian. (@mollerse) June 1, 2018
New property incoming: Logical -properties. There is a great article by @rachelandrew on @smashingmag @hj_chen #CSSconfEU
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
CSS has a writing mode system! Which includes vertical!
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
Text-oreitntation property allows you to set it to be mixed, upright or sideways
Text-combine-upright allows you to squash characters together when reading upright. @hj_chen #CSSconfEU
Mind blown with what's possible today with CSS #CSSConfEU pic.twitter.com/gYc9vqobYQ
— Alvaro Videla (@old_sound) June 1, 2018
CSS border properties is highly underrated. @hj_chen #CSSconfEU
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
Vertical text is not new to hozontial languages, its just that its been hard to do it on the web well, till now. If you look at print you see it everywhere in book covers, posters, etc. @hj_chen #CSSconfEU
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
Just because vertical text is mainly used in Eastern Asia, it doesnt mean western languages cant use it in their designs. @hj_chen #CSSconfEU
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
Vertical text was supported as early of IE 5. @hj_chen #CSSconfEU
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
The evolution of CSS layout possibilities on one slide ๐ #CSSConfEU pic.twitter.com/zGS6eYBn7d
— Michael Kรผhnel (@mkuehnel) June 1, 2018
The web is a unique medium of its own, you cannot manipulate the canvas directly, instead you have to code the screen. @hj_chen #CSSconfEU
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
First row ๐ ๐๐ปโโ๏ธ #CSSConfEU pic.twitter.com/SlhyM1IEAS
— Gelb wegen Meckerns (@ganzefolge) June 1, 2018
I've finally put on paper my (now coherent) screaming about @jsconfeu and @CSSconfeu ! A few honourable mentions ( I couldn't tag everyone... It would be a tweet just filled with mentions :') ) @bmeurer @katie_fenn @old_sound @hj_chen and @deluxee https://t.co/O6CRfsZW5F
— Rita Dias (@arita_dias) September 7, 2018
Chinese scripts projects are crazy . The scope is mind-blowing. There is a lot of effort that goes into creating a Chinese font.
— Jenny Wong ๐ (@miss_jwo) June 1, 2018
Thats why Chinese fonts are often designed by teams over years. @hj_chen #CSSconfEU
A Gerrit Noordzij reference during a CSS Conf talk. I love this conference. #CSSConfEU
— Wilfred Springer (@wilfredspringer) June 1, 2018
for free. You
can too.