This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

There are logical properties for width and height values.

width and height

The logical alternative for width is inline-size and the alternative for height is block-size. Here’s an example of how using inline-size over width makes a difference.

If you use width, the property sets the physical width, regardless of the writing mode.

h1 {
  border: 1rem solid;
  padding: 1rem;
  width: 16rem;
}

.vertical {
  writing-mode: vertical-rl;
}

<h1>width horizontal</h1>
<h1 class="vertical">width vertical</h1>

If you use inline-size, the property sets the logical width with respect to the writing mode.

h1 {
  border: 1rem solid;
  padding: 1rem;
  inline-size: 16rem;
}

.vertical {
  writing-mode: vertical-rl;
}

vi and vb

There are also logical unit alternatives for vw and vh.

The width and height of the <div> is always the width and height of the viewport, regardless of the writing mode.

div {
  border: 1rem solid;
  width: 20vw;
  height: 40vh;
}

.vertical {
  writing-mode: vertical-rl;
}

The width and height of the <div> matches either the vertical or horizontal dimensions of the viewport, depending on the writing mode.

div {
  border: 1rem solid;
  width: 20vi;
  height: 40vb;
}

• 50vw alternative: 50vi
• 50vh alternative: 50vb
• 50dvh alternative: 50dvb
• 50svh alternative: 50svb
• 50lvh alternative: 50lvb

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-01-10T09:38:54+00:00) Day 77: block-size, inline-size, vi, and vb. Retrieved from https://www.scien.cx/2023/01/10/day-77-block-size-inline-size-vi-and-vb/

MLA

" » Day 77: block-size, inline-size, vi, and vb." Manuel Matuzović | Sciencx - Tuesday January 10, 2023, https://www.scien.cx/2023/01/10/day-77-block-size-inline-size-vi-and-vb/

HARVARD

Manuel Matuzović | Sciencx Tuesday January 10, 2023 » Day 77: block-size, inline-size, vi, and vb., viewed ,<https://www.scien.cx/2023/01/10/day-77-block-size-inline-size-vi-and-vb/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 77: block-size, inline-size, vi, and vb. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/10/day-77-block-size-inline-size-vi-and-vb/

CHICAGO

" » Day 77: block-size, inline-size, vi, and vb." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/10/day-77-block-size-inline-size-vi-and-vb/

IEEE

" » Day 77: block-size, inline-size, vi, and vb." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/10/day-77-block-size-inline-size-vi-and-vb/. [Accessed: ]

rf:citation

» Day 77: block-size, inline-size, vi, and vb | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/10/day-77-block-size-inline-size-vi-and-vb/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.