svi
One percent of the small viewport, measured the way a line of text runs.
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 1svi = 1/100 of the small viewport in the inline direction
How it works
1svi is the small viewport measured along the inline axis, the vi unit with the toolbars counted as expanded. In horizontal text it is svw, and in a 1280px window 10svi comes to 128px.
It inherits the open question of vi. Which writing mode sets the axis, the root’s as MDN says or the element’s as the definition and Chromium have it, matters only on a page that mixes directions. Use svi in code shared between horizontal and vertical pages, such as a column that takes a share of the screen along its lines, and test it in the browsers you support. The card’s example, a column of 90svi in a vertical document, measured 720px in a window 800px tall.
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
- the writing mode
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
Reach for it when
A column that fits the small viewport along its lines, in code shared between writing modes.
Watch out
Put vertical text on html and svi measures the height, in both readings. Writing-mode on a child is where the readings part: MDN and the summary table ignore it, the definition and Chromium follow it. See vi for the measurement.
html {
writing-mode: vertical-rl;
}
.column {
inline-size: 90svi;
}