Unit Rulebook

Type a unit, or a word from its description.

    svb

    One percent of the small viewport, measured across the stack of lines.

    Safe to useBaseline: widely available

    First version with support, from MDN browser data
    BrowserSince
    Chrome108+
    Chrome Android108+
    Edge108+
    Firefox101+
    Firefox Android101+
    Safari15.4+
    Safari iOS15.4+

    Formula 1svb = 1/100 of the small viewport in the block direction

    How it works

    1svb is the small viewport measured along the block axis, which is the height for horizontal text, so svb and svh agree there. A block-size of 100svb is as long as the small viewport in the direction lines stack: the height on a horizontal page, the width on a vertical one, with one declaration for both. In a vertical document in a window 1280px wide it measured 1280px.

    It keeps the promise of svh: a block of exactly 100svb is never larger than the visible area, in any writing mode. The strip problem of svh comes with it: once the toolbars retract, a bare strip shows under the block, so match the section’s background to the page.

    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
    Ten of each viewport unit in two windows
    UnitLaptop, 1280 by 800Phone, 390 by 844
    10vw128px39px
    10vh80px84.4px
    10vmin80px39px
    10vmax128px84.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 block that never exceeds the visible area, in any writing mode.

    Watch out

    In horizontal text svb equals svh and has its limits: once the toolbars retract, 100svb no longer fills the screen.

    Example Lines stack from right to left, so the shelf is as wide as the small viewport.
    html {
  writing-mode: vertical-rl;
}
.shelf {
  block-size: 100svb;
}
    • sviOne percent of the small viewport, measured the way a line of text runs.
    • lvbOne percent of the large viewport, measured in the direction lines pile up.
    • svhA hundredth of the visible height with browser toolbars fully shown.

    MDNSpecification