dvi
A hundredth of what is visible right now, measured along the text's own run.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 108+ |
| Chrome Android | 108+ |
| Edge | 108+ |
| Firefox | 101+ |
| Firefox Android | 101+ |
| Safari | 15.4+ |
| Safari iOS | 15.4+ |
Formula 1dvi = 1/100 of the current viewport in the inline direction
How it works
1dvi is the dynamic viewport along the inline axis, which is dvw for horizontal text. With dvb it spells the fill of a sheet as inline-size: 100dvi; block-size: 100dvb, a pair that does not name a screen side and carries over to layouts that switch to vertical writing.
The writing-mode question of vi applies unchanged: MDN and the table read the axis off the root, and the definition and Chromium read it off the element that carries the unit. On a page that never overrides the writing mode of the root, both give the same number, and in horizontal text it is the number of dvw. In a vertical document 100dvi measured the window height, 800px.
Try it
Viewport units for a window of your choice
Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.
10vw- 128px
10vh- 80px
10vmin- 80px
10vmax- 128px
On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.
The same as a table
| Unit | Laptop, 1280 by 800 | Phone, 390 by 844 |
|---|---|---|
10vw | 128px | 39px |
10vh | 80px | 84.4px |
10vmin | 80px | 39px |
10vmax | 128px | 84.4px |
What changes it
- Moves with
- the window size
- phone toolbars
- the writing mode
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
Reach for it when
A column that follows the visible height as the toolbars move, in vertical text.
Watch out
In vertical text dvi measures the height, so it follows the toolbars when they take height, which dvw does not.
html {
writing-mode: vertical-rl;
}
.column {
inline-size: 100dvi;
}