FREE ebook: Test Automation Design & Strategy for Your App. How To Save Money With Automation

adrianroselli.com adrianroselli.com3 years ago in #Dev Love496

November 13, 2019; 0 Comments I have often remarked that my blog is little more than a place for me to offload my memory. I need not remember the syntax, logic, test results, etc. of every control, widget, style, browser, and so on. I can just write a post and refer to it later. This post on CSS logical properties is just that. I don’t need to know it all yet, but when browser support is common I need to be able to support it out of the gate. I need to be able to implement it, test it, debug it, and understand the accessibility impact. Since my work straddles accessibility and internationalization, those are critical skills. Whether or not you know it, dear reader, this probably applies to you too. The Syntax Logical properties mostly do away with positional naming. Positions can become meaningless when text is rendered in a different language. For example, making list items by padding on the left and dropping a bullet in the gap will look a bit weird when translated to Hebrew, which is read right-to-left. The visual indent will be consumed by end-of-line spacing (since it is read from the right) and the bullet will look like a really aggressive period. Keywords that are based on content flow are a key aspect of logical properties (and values). While text-align: left may be your standard style for a ragged-right block of text, a logical style would be text-align: start. I made a thing to try to illustrate the mapping change. It is really for native English speakers (me). Yes, it leans on the colors from the Firefox dev tools. See the Pen Logical Properties Mapping by Adrian Roselli (@aardrian) on CodePen. Screen shots of the two views in the visualization, in case you find it easier to look at them next to one another. For those (me on Thursdays) who want a chart instead of a visualization to compare, the following table might help. It also includes a few mappings not in the preceding visualization. Logical Property and Value Mappings Typical Logical border-top border-block-start border-right border-inline-end border-bottom border-block-end border-left border-inline-start border-top: Xborder-bottom: Y border-block: X Y border-left: X;border-right: Y; border-inline: X Y; border-top-left-radius border-start-start-radius border-top-right-radius border-start-end-radius border-bottom-left-radius border-end-start-radius border-bottom-right-radius border-end-end-radius margin-top margin-block-start margin-right margin-inline-end margin-bottom margin-block-end margin-left margin-inline-start margin: X Y; margin-block: X;margin-inline: Y; padding-top padding-block-start padding-right padding-inline-end padding-bottom padding-block-end padding-left padding-inline-start padding: X Y; padding-block: X;padding-inline: Y; min-width min-inline-size min-height min-block-size text-align: left; text-align: start; text-align: right; text-align: end; Block vs. Inline By now you should have noticed a lot of block and inline in those properties. Once you get your head around the general meaning it might be easier (it was for me). Inline This corresponds to the axis of the text flow. English, for example, has a left-to-right text flow, so the inline axis is horizontal. For Japanese it would be vertical (since it has a top-to-bottom text flow). Block This is the axis perpendicular to the text flow axis. For English, the block axis is vertical. For Chinese it would be horizontal. Start vs. End You probably also noticed start and end used throughout as well. Once you know the text direction this might be easier. Start This corresponds to the text direction and reflects the side of the text from which you would start reading. For English, this corresponds to left. For Hebrew this would be right. End This also corresponds…

Like to keep reading?

This article first appeared on adrianroselli.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply