inline-size | CSS-Tricks

inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode is vertical.

.element {
  inline-size: 700px;
  writing-mode: vertical-lr;
}

As you might have guessed by the example above, the writing-mode property changes the orientation of the text and layout flow by 90 degrees. There are two main reason why you’d want to do that.

First, as a design choice, you might want to display vertical text on an element, say a header:

The second — and probably most significant — reason you might want to use a logical property like inline-size is to accommodate internationalization on a site. Many East Asian scripts such as Chinese, Japanese, and Korean can be written horizontally or vertically. Using logical properties, we can provide the correct sizing direction of elements based on the user’s writing mode.

Jen Simmons has an article and presentation that go deeper into CSS writing modes.

Why can’t we just use the ’ol trusty `width` property?

You can! However, you may want to reach for inline-size instead if you’re concerned about the context of your content changing based on a user’s language. width is a physical dimension, so when the writing mode changes, an element keeps its horizontal width size, breaking a layout when it’s set up to be vertical. Logical properties, like inline-size, can respond to those changes and apply width in the proper direction.

For example, if a paragraph element is 400px wide using width, when the writing mode is set to vertical-lr, the content will rotate, changing the layout, but that paragraph will remain being 400px wide instead of 400px tall.

See that? Well, inline-size is smart! It changes from width to height, depending on the writing-mode value.

Syntax

inline-size: <'width'>

Initial: auto
Applies to: same as height and width
Inherited: no
Percentages: as for the corresponding physical property
Computed value: same as height and width
Animation type: by computed value type

Values

/* Length values */
inline-size: 250px;
inline-size: 5rem;
 
/* Percentage values */
inline-size: 75%;
 
/* Keyword values */
inline-size: auto;
inline-size: fit-content(5rem);
inline-size: max-content;
inline-size: min-content;
 
/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;

auto: The element’s inline size will adhere to the size of its parent element.
fit-content(): This function allows a container to grow until a desired size, then make the text wrap, effectively clamping the content to the provided size value. It can be used on Grid containers, as well as box sizing, and while caniuse shows strong support for the function with inline-size , our testing was less conclusive. That could be due to the Box Sizing Module Level 3 spec’s Working Draft status.
max-content: The intrinsic preferred width, meaning the element stretches the text out to as long as it can possibly be and will make the box be as long as the text.
min-content: The intrinsic minimum width, meaning the element’s box reduces to the minimum size of its content. The box will be the size of the largest string of text.