{"route":"/en-US-v0.14.1/reference/layout/relative/","title":"Relative Length","description":"Documentation for the Relative Length type.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"relative-to-the-page","name":"Relative to the page","children":[]},{"id":"relative-to-a-container","name":"Relative to a container","children":[]},{"id":"scripting","name":"Scripting","children":[]}],"body":{"kind":"type","content":{"name":"relative","title":"Relative Length","keywords":[],"oneliner":"A length in relation to some known length.","details":"

A length in relation to some known length.

\n

This type is a combination of a length with a ratio. It results from\naddition and subtraction of a length and a ratio. Wherever a relative length\nis expected, you can also use a bare length or ratio.

\n

Relative to the page

\n

A common use case is setting the width or height of a layout element (e.g.,\nblock, rect, etc.) as a certain percentage of the width of the page.\nHere, the rectangle's width is set to 25%, so it takes up one fourth of\nthe page's inner width (the width minus margins).

\n
#rect(width: 25%)\n
\"Preview\"
\n

Bare lengths or ratios are always valid where relative lengths are expected,\nbut the two can also be freely mixed:

\n
#rect(width: 25% + 1cm)\n
\"Preview\"
\n

If you're trying to size an element so that it takes up the page's full\nwidth, you have a few options (this highly depends on your exact use case):

\n
    \n
  1. Set page margins to 0pt (#set page(margin: 0pt))
    2. \n
  2. Multiply the ratio by the known full page width (21cm * 69%)
    3. \n
  3. Use padding which will negate the margins (#pad(x: -2.5cm, ...))
    4. \n
  4. Use the page background or\nforeground field as those don't take margins into\naccount (note that it will render the content outside of the document\nflow, see place to control the content position)
    5. \n
\n

Relative to a container

\n

When a layout element (e.g. a rect) is nested in another layout container\n(e.g. a block) instead of being a direct descendant of the page, relative\nwidths become relative to the container:

\n
#block(\n  width: 100pt,\n  fill: aqua,\n  rect(width: 50%),\n)\n
\"Preview\"
\n

Scripting

\n

You can multiply relative lengths by ratios, integers, and\nfloats.

\n

A relative length has the following fields:

\n\n
#(100% - 50pt).length \\\n#(100% - 50pt).ratio\n
\"Preview\"
","constructor":null,"scope":[]}}}