blog

commit

1fda3db5ba6dcfb52bc5160c9e5cf0be394db9a3

parent

8ce07b41f322682945c73c2a408cde72212c6319

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-02-26 12:18

post on flow-relative css

Diffstat

2 files changed, 78 insertions, 0 deletions

diff --git a/_content/posts/2023-02-26-flow-relative-layout/index.md b/_content/posts/2023-02-26-flow-relative-layout/index.md

@@ -0,0 +1,75 @@
   -1     1 Back in 2026 I wrote about [right-to-left CSS](../2016-06-04-rtl-css/). Now I
   -1     2 wanted to give a quick update on what changed in since then.
   -1     3 
   -1     4 To recap: different scripts are written in different directions. While Latin is
   -1     5 usually written left-to-right, Arabic and Hebrew are usually written
   -1     6 right-to-left. The layout is usually mirrored accordingly. However, there are
   -1     7 also scripts that are usually written top-to-bottom, so the axes need to be
   -1     8 flipped.
   -1     9 
   -1    10 [CSS Writing Modes Level 3](https://www.w3.org/TR/css-writing-modes-3/) defines
   -1    11 the concept of different writing modes as well as the 4 logical directions
   -1    12 `block-start`, `block-end`, `inline-start`, and `inline-end`. It became an
   -1    13 official W3C recommendation in 2019.
   -1    14 
   -1    15 [CSS Logical Properties and Values Level
   -1    16 1](https://www.w3.org/TR/css-logical-1/) defines the relevant changes to CSS
   -1    17 that would be required to define a layout that automatically adapts to the
   -1    18 current writing mode. Unfortunately it is still in the draft stage. Some parts
   -1    19 are already available in browsers, but some other parts are still [likely to
   -1    20 change](https://www.w3.org/TR/css-logical-1/#issue-3d880eb1).
   -1    21 
   -1    22 # What works
   -1    23 
   -1    24 -	`block-size` and `inline-size`
   -1    25 -	`margin-block-start`, `margin-inline-end`, …
   -1    26 -	`padding-block-start`, `padding-inline-end`, …
   -1    27 -	`border-block-start`, `border-inline-end`, …
   -1    28 -	`border-start-end-radius`, … (`border-{block}-{inline}-radius`)
   -1    29 -	`text-align: start|end`
   -1    30 -	the axis in flex and grid layout are always flow-relative
   -1    31 -	`vb` and `vi` units (instead of `vh` and `vw`)
   -1    32 
   -1    33 Source: <https://www.w3.org/TR/CSS/#CR-exceptions> and <https://caniuse.com/css-logical-props>
   -1    34 
   -1    35 # What doesn't work
   -1    36 
   -1    37 -	positioning properties like `top` or `left` have no equivalent yet
   -1    38 -	[`float`](https://caniuse.com/mdn-css_properties_float_flow_relative_values)
   -1    39 -	[`overflow-block|inline`](https://caniuse.com/mdn-css_properties_overflow-block)
   -1    40 -	[`resize-block|inline`](https://caniuse.com/mdn-css_properties_resize_flow_relative_support)
   -1    41 -	media queries do not have flow-relative equivalents for `width` and `height` yet
   -1    42 
   -1    43 There is probably much more. There are so many CSS properties that it is easy
   -1    44 to loose track. Also note that there are some properties that might interact
   -1    45 with the layout but that do not adapt to the writing mode for a good reason:
   -1    46 
   -1    47 -	images are not rotated
   -1    48 -	clip paths are not rotated
   -1    49 -	shadow offsets refer to physical directions
   -1    50 -	…
   -1    51 
   -1    52 # Recommendations
   -1    53 
   -1    54 There is no real reason to use `width` or `margin-bottom` anymore. Just get
   -1    55 used to `inline-size` and `margin-block-end`.
   -1    56 
   -1    57 You have to be careful with shorthand properties though. `margin: 1em` is fine
   -1    58 because it sets the same value to all directions. `margin: 1em 2em` uses
   -1    59 physical directions, so it should be split into `margin-block: 1em` and
   -1    60 `margin-inline: 2em`.
   -1    61 
   -1    62 If you do not need to support vertical writing modes, this will get your pretty
   -1    63 far. The only things you need to find workarounds for are `float` and
   -1    64 non-static positioning. Often you can replace them with flex or grid layout.
   -1    65 For the few remaining cases I actually still use my [simple script from
   -1    66 2016](http://tobib.spline.de/xi/posts/2016-06-04-rtl-css/#the-workaround).
   -1    67 
   -1    68 Vertical writing modes are not quite there yet. If you need to support them you
   -1    69 will have to put in some extra effort. But it doesn't hurt to get into this
   -1    70 mode of thinking already. It will come sooner or later.
   -1    71 
   -1    72 And finally: Don't be dogmatic about this. There might be cases in which you
   -1    73 actually do want physical dimensions. I really think these will be rare
   -1    74 exceptions. But don't banish our old friends `width` and `height` from your
   -1    75 toolbox just yet.

diff --git a/_content/posts/2023-02-26-flow-relative-layout/index.yml b/_content/posts/2023-02-26-flow-relative-layout/index.yml

@@ -0,0 +1,3 @@
   -1     1 title: It's time to say goodbye to width and height in CSS
   -1     2 date: 2023-02-26
   -1     3 tags: [code, css, a11y]