{"route":"/en-US-v0.13.1/reference/layout/relative/","title":"Relative Length","description":"Documentation for the Relative Length type.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"example","name":"Example","children":[]}],"body":{"kind":"type","content":{"name":"relative","title":"Relative Length","keywords":[],"oneliner":"A length in relation to some known length.","details":"<p>A length in relation to some known length.</p>\n<p>This type is a combination of a <a href=\"/en-US-v0.13.1/reference/layout/length/\" title=\"length\">length</a> with a <a href=\"/en-US-v0.13.1/reference/layout/ratio/\" title=\"ratio\">ratio</a>. 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.</p>\n<h2 id=\"example\">Example</h2>\n<div class=\"previewed-code\"><pre><code><span class=\"typ-func\">#</span><span class=\"typ-func\">rect</span><span class=\"typ-punct\">(</span>width<span class=\"typ-punct\">:</span> <span class=\"typ-num\">100%</span> <span class=\"typ-op\">-</span> <span class=\"typ-num\">50pt</span><span class=\"typ-punct\">)</span>\n\n<span class=\"typ-punct\">#</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">100%</span> <span class=\"typ-op\">-</span> <span class=\"typ-num\">50pt</span><span class=\"typ-punct\">)</span><span class=\"typ-punct\">.</span><span class=\"typ-pol\">length</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-punct\">#</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">100%</span> <span class=\"typ-op\">-</span> <span class=\"typ-num\">50pt</span><span class=\"typ-punct\">)</span><span class=\"typ-punct\">.</span><span class=\"typ-pol\">ratio</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/78c4d2ff0209fbcacbccfe80f80eb03c.png\" alt=\"Preview\"></div></div>\n<p>A relative length has the following fields:</p>\n<ul>\n<li><code>length</code>: Its length component.</li>\n<li><code>ratio</code>: Its ratio component.</li>\n</ul>","constructor":null,"scope":[]}}}