Peningkatan tata letak logis dengan singkatan aliran-relatif
27 Juni 2021Artikel
New logical property shorthands and new inset properties for Chromium.
Since Chromium 69 (September 3rd 2018), sifat logis and values have helped developers maintain control of their international layouts through logical, rather than physical, direction and dimension styles. In Chromium 87, shorthands and offsets have shipped to make these logical properties and values a bit easier to write. This catches Chromium up to Firefox, which has had support for the shorthands since 66. Safari has them ready in their tech preview.
If you’re already familiar with logical properties, inline and block axes, and don’t want a refresher, you can skip ahead. Otherwise, here’s a short refresher.
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.
Therefore the physical side of the box isn’t very useful internationally. Thus begins the process of supporting multiple languages; learning about physical versus logical sides of the box model.
Istilah kunci: A logical property is one that references a side, corner or axis of the box model in context of the applicable language direction. It’s akin to referencing someone’s strong arm, rather than assuming it’s their right arm. “Right” is a physical arm reference, “strong” is a logical arm reference, contextual to the individual.
Have you ever inspected the p element in Chrome DevTools? If so, you might have noticed that the default User Agent styles are not physical, but logical.
The margin is not on the top or bottom like an English reader might believe. It’s block-start dan block-end! These logical properties are akin to an English reader’s top and bottom, but also akin to a Japanese reader as right and left. Written once, works everywhere.
Normal flow is when the webpage is part of this multi-directionality intentionally. When page content updates according to document direction changes, the layout and its elements are considered in flow. Read more about “in” and “out” of flow on MDN or in the CSS Display Module spec. While logical properties are not required to be in flow, they do much of the heavy lifting for you as directionality changes. Flow implies direction, which letters, words and content need to travel along. This leads us to block and inline logical directions.
Block direction is the direction that new content blocks follow, like asking yourself, “where to put the next paragraph?”. You might think of it as a “content block”, or “block of text”. Every language arranges their blocks and orders them along their respective block-axis. block-start is the side a paragraph is first placed, while block-end is the side new paragraphs flow towards.
Istilah kunci: The block direction is defined by the writing-mode property. For example, horizontal-tb (the initial value) has a vertical block axis that flows top-to-bottom (tb). Other values have an horizontal block axis, which can flow left-to-right (like in vertical-lr) or right-to-left (like in vertical-rl).
In traditional Japanese handwriting, for example, block direction flows right to left:
Inline direction is the direction that letters and words go. Consider the direction your arm and hand travel when you write; they are traveling along the inline-axis. inline-start is the side where you start writing, while inline-end is the side where writing ends or wraps. The above video, the inline-axis is top to bottom, but in this next video the inline-axis flows right to left.
Istilah kunci: The inline direction is defined by both writing-mode dan direction. For example, it flows left-to-right with horizontal-tb dan ltr, right-to-left with horizontal-tb dan rtl, top-to-bottom with vertical-lr dan ltr, and bottom-to-top with vertical-rl dan rtl.
Being flow-relative means that the styles written for one language will be contextual and appropriately applied into other languages. Content will flow relative to the language it’s being delivered for.
Some of the following shorthands are not new features for the browser, rather, easier ways to write styles by taking advantage of being able to set values on both block or inline edges at once. The inset-* sifat logis do bring new abilities, as there were no longhand ways to specify absolute positions with logical properties before it. Insets and shorthands flow (hehe) together so well though, I’m going to tell you about all of the new logical properties features landing in Chromium 87 at once.
Caution: If the above items do not have space between them, then margin-block shorthand is not supported in your browser.
Longhand
margin-block-start: 2ch; margin-block-end: 2ch;
New shorthand
margin-block: 2ch; margin-block: 2ch 2ch;
There is no shorthand for “top and bottom” or “left and right”… until now! You probably reference all 4 sides using the shorthand of margin: 10px;, and now you can easily reference 2 complimentary sides by using the logical property shorthand.
The physical properties top, right, bottom dan left can all be written as values for the inset property. Any value of position can benefit from setting sides with inset.
As exciting as the physical sides shorthand is, there’s even more from the logical features brought by additional inset shorthands. These shorthands bring developer authoring convenience (they’re shorter to type) but also increase the potential reach for the layout because they’re flow-relative.
Let’s put it all together in a small example. Logical properties can layout an image with a caption to handle different writing and document directions.
Or try it!
You don’t have to do much to make a card internationally responsive with a
and a few logical properties. If you’re curious how all this internationally considerate CSS works together, I hope this is a small meaningful introduction.
The Cascade or build tools are viable options to have old and new browsers alike, properly spaced with updated logical properties. For Cascade fallbacks, follow a physical property with a logical one and the browser will use the “last” property it found during style resolution.
p{ margin-top: 1ch; margin-bottom: 2ch;
margin-block: 1ch 2ch; }
That’s not quite a full solution for everyone though. Here’s a handwritten fallback that leverages the :lang() pseudo-selector to target specific languages, adjusts their physical spacing appropriately, then at the end offers the logical spacing for supporting browsers:
p{ margin-top: 1ch; margin-bottom: 2ch; }
:lang(ja){ p{ margin-top: 0; margin-bottom: 0;
margin-right: 1ch; margin-left: 2ch; } }
:lang(he){…} :lang(mn){…}
p{ margin: 0; margin-block: 1ch 2ch; }
You could also use @supports to determine whether or not to provide physical property fallbacks:
Sass, PostCSS, Emotion and others have automated bundler and/or build time offerings that have a wide array of fallbacks or solutions. Check out each one to see which matches your toolchain and overall site strategy.
More of CSS will offer logical properties, it’s not done yet! There’s one big missing set of shorthands though, and a resolution is still pending in this Github issue. There is a temporary solution in a draft. What if you want to style all logical sides of a box with a shorthand?
The current draft proposal would mean you have to write logical in every shorthand in order to get the logical equivalent applied, which doesn’t sound very DRY to some.
There are other proposals to change it at the block or page level, but that could leak logical uses into styles still assuming physical sides.
html{ flow-mode: physical; flow-mode: logical; }
It’s a tough one! Cast your vote, voice your opinion, we want to hear from you.
Want to learn or study logical properties more? Here’s a detailed reference, along with guides and examples, on MDN ?
Indonesian 
English