Zombie Width and Height

One problem with being language-direction agnostic is that many of the dimensional properties we have been stuck with are in an English/left-to-right context. Width is only ever horizontal, and height is only ever vertical, but if you’re translating to a vertical language, you’d want width and height to switch along with the writing direction. That’s where the inline and block direction we discussed earlier comes in. These properties work in all modern browsers, which is to say, not in IE, but if you don’t need IE support, have at them.

Note: While there is good support for the properties discussed below (sometimes called “logical” properties while width/height are called “physical” properties), there’s quite a few more properties (e.g., positioning) and concepts (e.g., vertical responsive design flow) needed to make CSS fully direction agnostic.

Direction agnostic zombies

• inline-size: The size of an element along the inline direction

  (Inline-size is the writing-direction-agnostic version of width.)

• block-size: The size of an element along the block direction

  (Block-size is the writing-direction-agnostic version of height.)

.direction-agnostic-zombie {
    inline-size: 5em;
    block-size: 2em;
}

Experiments to try:
To eliminate any confusion that you might have, here is a small activity that you can perform. Go to the CSS tab, make the following changes, and wait for a few seconds to see the result on the output tab.

1. Try different inline-size and different block-size values and watch how each box changes or doesn’t.