{"id":325899,"date":"2020-11-16T13:05:53","date_gmt":"2020-11-16T21:05:53","guid":{"rendered":"https:\/\/css-tricks.com\/?p=325899"},"modified":"2020-11-16T13:05:59","modified_gmt":"2020-11-16T21:05:59","slug":"logical-layout-enhancements-with-flow-relative-shorthands","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/logical-layout-enhancements-with-flow-relative-shorthands\/","title":{"rendered":"Logical layout enhancements with flow-relative shorthands"},"content":{"rendered":"\n

Admission: I’ve never worked on a website that was in anything other than English. I have worked on websites that were translated by other teams, but I didn’t have much to do with it. I do, however, spend a lot of time thinking in terms of block-level and inline-level elements. It’s been a couple of years now since logical properties<\/a> have started to drop, and they have definitely started to invade my CSS muscle memory.<\/p>\n\n\n\n

If you work in top-to-bottom, left-to-right languages like English as I do, you just map top and bottom to block<\/code> in your head (you probably already do) and left and right as inline<\/code>. So instead of height<\/code>, you think block-size<\/code>. Instead of border-right<\/code>, you think border-inline-end<\/code>. Instead of padding: 0 1em<\/code>, you think padding-inline: 1em<\/code>. And instead of margin-top<\/code>, you think margin-block-start<\/code>.<\/p>\n\n\n\n\n\n\n\n

I mapped out that stuff in another post<\/a>.<\/p>\n\n\n\n

One trouble is that browser support is a little weird. Like margin-block-end<\/code> is gonna work anywhere that any logical properties at all work, but if you’re like, “I’d like to set both the start and the end (like margin: 1rem 0<\/code>), so I’ll use just margin-block<\/code>,” well, that doesn’t work in some browsers (yet). That makes a certain sense, because there is no “direct mapping” of margin-block<\/code> to any ex-logical CSS property. There are enough other little caveats like that, making me a just a smidge<\/em> squeamish about using them everywhere.<\/p>\n\n\n\n

Still, I’m probably going to start using them a lot more, as even if I still mostly only work on English sites, I like the idea that if I use them consistently, it makes translating any site I work on to languages that aren’t left-to-right and top-to-bottom a lot easier. Not to mention, I just like the mental model of thinking of things as block and inline.<\/p>\n\n\n\n

I’m trying to link to Adam Argyle and Oriol Brufau’s article<\/a> here, so let me just end with a quote from it, putting a point on why using non-logical properties only makes sense for one “language style”:<\/p>\n\n\n\n

In English, letters and words flow left to right while paragraphs are stacked top to bottom. In traditional Chinese, letters and words are top to bottom while paragraphs are stacked right to left. In just these 2 cases, if we write CSS that puts “margin top” on a paragraph, we’re only appropriately spacing 1 language style. If the page is translated into traditional Chinese from English, the margin may well not make sense in the new vertical writing mode.<\/p><\/blockquote>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Admission: I’ve never worked on a website that was in anything other than English. I have worked on websites that were translated by other teams, but I didn’t have much to do with it. I do, however, spend a lot of time thinking in terms of block-level and inline-level elements. It’s been a couple of […]<\/p>\n","protected":false},"author":3,"featured_media":325916,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1467],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/block-and-inline-visual.png?fit=1920%2C1384&ssl=1","jetpack-related-posts":[{"id":344815,"url":"https:\/\/css-tricks.com\/css-logical-properties-and-values\/","url_meta":{"origin":325899,"position":0},"title":"CSS Logical Properties and Values","date":"July 27, 2021","format":false,"excerpt":"Now that cross-browser support is at a tipping point, it's a good time to take a look at logical properties and values. If you're creating a website in multiple languages, logical properties and values are incredibly useful. Even if you're not, there are still some convenient new shorthands it's worth\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_23DCC53F37C675A56273FC1D596017BBDCB5DB765FF03E9E64CEC128CB81E439_1624787344817_blockandinline.png?fit=1200%2C454&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302289,"url":"https:\/\/css-tricks.com\/building-multi-directional-layouts\/","url_meta":{"origin":325899,"position":1},"title":"Building Multi-Directional Layouts","date":"January 23, 2020","format":false,"excerpt":"There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS logical properties and values (e.g. margin-inline-start). \u00a0These are a W3C working draft that still going under heavy editing, but have shipped in many browsers.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/rtl-ltr.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367064,"url":"https:\/\/css-tricks.com\/logical-properties-for-useful-shorthands\/","url_meta":{"origin":325899,"position":2},"title":"Logical Properties for Useful Shorthands","date":"July 20, 2022","format":false,"excerpt":"Michelle Barker with my favorite sorta blog post: short, practical, and leaves you with a valuable nugget for your time. Here, she gets into logical property shorthands in CSS, particularly those that set lengths just on a single axis, say only the block (vertical) axis or just the inline (horizontal)\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/hands-dirst-flowers.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359180,"url":"https:\/\/css-tricks.com\/faulty-logic\/","url_meta":{"origin":325899,"position":3},"title":"Faulty logic","date":"December 14, 2021","format":false,"excerpt":"Ain't this the truth: It\u2019s like when you\u2019re learning a new language. At some point your brain goes from\u00a0translating\u00a0from your mother tongue into the other language, and instead starts\u00a0thinking\u00a0in that other language. I don't speak any other language besides English, but I've heard that's true. With perhaps a last step\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/candles-lightbulb.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":275378,"url":"https:\/\/css-tricks.com\/css-logical-properties\/","url_meta":{"origin":325899,"position":4},"title":"CSS Logical Properties","date":"August 21, 2018","format":false,"excerpt":"A property like margin-left seems fairly logical, but as Manuel Rego Casasnovas says: Imagine that you have some right-to-left (RTL) content on your website your left might be probably the physical right, so if you are usually setting margin-left: 100px for some elements, you might want to replace that with\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/logical-css-properties.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365031,"url":"https:\/\/css-tricks.com\/late-to-logical\/","url_meta":{"origin":325899,"position":5},"title":"Late to Logical","date":"December 7, 2020","format":false,"excerpt":"2020 brought\u00a0another wave of logical property features\u00a0to major browsers and I\u2019ve thoroughly enjoyed my investment into logical, rather than physical, web styling. I feel like I\u2019ve learned a new way to speak about the box model that results in less written code with more global coverage. p { \/* \ud83d\udeab\u2026","rel":"","context":"In "2020 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/block-and-inline-visual.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/block-and-inline-visual.png?fit=1024%2C738&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325899"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=325899"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325899\/revisions"}],"predecessor-version":[{"id":325917,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325899\/revisions\/325917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/325916"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=325899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=325899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=325899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}