{"route":"/en-US-v0.13.1/reference/layout/place/","title":"Place","description":"Documentation for the `place` function.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"examples","name":"Examples","children":[]},{"id":"effect-on-other-elements","name":"Effect On Other Elements","children":[]},{"id":"parameters","name":"Parameters","children":[{"id":"parameters-alignment","name":"alignment","children":[]},{"id":"parameters-scope","name":"scope","children":[]},{"id":"parameters-float","name":"float","children":[]},{"id":"parameters-clearance","name":"clearance","children":[]},{"id":"parameters-dx","name":"dx","children":[]},{"id":"parameters-dy","name":"dy","children":[]},{"id":"parameters-body","name":"body","children":[]}]},{"id":"definitions","name":"Definitions","children":[{"id":"definitions-flush","name":"Flush","children":[]}]}],"body":{"kind":"func","content":{"path":[],"name":"place","title":"Place","keywords":[],"oneliner":"Places content relatively to its parent container.","element":true,"contextual":false,"deprecation":null,"details":"<p>Places content relatively to its parent container.</p>\n<p>Placed content can be either overlaid (the default) or floating. Overlaid\ncontent is aligned with the parent container according to the given\n<a href=\"/en-US-v0.13.1/reference/layout/place/#parameters-alignment\"><code>alignment</code></a>, and shown over any other content added so\nfar in the container. Floating content is placed at the top or bottom of\nthe container, displacing other content down or up respectively. In both\ncases, the content position can be adjusted with <a href=\"/en-US-v0.13.1/reference/layout/place/#parameters-dx\"><code>dx</code></a> and\n<a href=\"/en-US-v0.13.1/reference/layout/place/#parameters-dy\"><code>dy</code></a> offsets without affecting the layout.</p>\n<p>The parent can be any container such as a <a href=\"/en-US-v0.13.1/reference/layout/block/\" title=\"`block`\"><code>block</code></a>, <a href=\"/en-US-v0.13.1/reference/layout/box/\" title=\"`box`\"><code>box</code></a>,\n<a href=\"/en-US-v0.13.1/reference/visualize/rect/\" title=\"`rect`\"><code>rect</code></a>, etc. A top level <code>place</code> call will place content directly\nin the text area of the current page. This can be used for absolute\npositioning on the page: with a <code>top + left</code>\n<a href=\"/en-US-v0.13.1/reference/layout/place/#parameters-alignment\"><code>alignment</code></a>, the offsets <code>dx</code> and <code>dy</code> will set the\nposition of the element's top left corner relatively to the top left corner\nof the text area. For absolute positioning on the full page including\nmargins, you can use <code>place</code> in <a href=\"/en-US-v0.13.1/reference/layout/page/#parameters-foreground\"><code>page.foreground</code></a> or\n<a href=\"/en-US-v0.13.1/reference/layout/page/#parameters-background\"><code>page.background</code></a>.</p>\n<h2 id=\"examples\">Examples</h2>\n<div class=\"previewed-code\"><pre><code><span class=\"typ-key\">#</span><span class=\"typ-key\">set</span> <span class=\"typ-func\">page</span><span class=\"typ-punct\">(</span>height<span class=\"typ-punct\">:</span> <span class=\"typ-num\">120pt</span><span class=\"typ-punct\">)</span>\nHello, world!\n\n<span class=\"typ-func\">#</span><span class=\"typ-func\">rect</span><span class=\"typ-punct\">(</span>\n  width<span class=\"typ-punct\">:</span> <span class=\"typ-num\">100%</span><span class=\"typ-punct\">,</span>\n  height<span class=\"typ-punct\">:</span> <span class=\"typ-num\">2cm</span><span class=\"typ-punct\">,</span>\n  <span class=\"typ-func\">place</span><span class=\"typ-punct\">(</span>horizon <span class=\"typ-op\">+</span> right<span class=\"typ-punct\">,</span> <span class=\"typ-func\">square</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span><span class=\"typ-punct\">)</span><span class=\"typ-punct\">,</span>\n<span class=\"typ-punct\">)</span>\n\n<span class=\"typ-func\">#</span><span class=\"typ-func\">place</span><span class=\"typ-punct\">(</span>\n  top <span class=\"typ-op\">+</span> left<span class=\"typ-punct\">,</span>\n  dx<span class=\"typ-punct\">:</span> <span class=\"typ-op\">-</span><span class=\"typ-num\">5pt</span><span class=\"typ-punct\">,</span>\n  <span class=\"typ-func\">square</span><span class=\"typ-punct\">(</span>size<span class=\"typ-punct\">:</span> <span class=\"typ-num\">5pt</span><span class=\"typ-punct\">,</span> fill<span class=\"typ-punct\">:</span> red<span class=\"typ-punct\">)</span><span class=\"typ-punct\">,</span>\n<span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/6f751edfbb0d9761c3a6c972a39b6b7e.png\" alt=\"Preview\"></div></div>\n<h2 id=\"effect-on-other-elements\">Effect on the position of other elements</h2>\n<p>Overlaid elements don't take space in the flow of content, but a <code>place</code>\ncall inserts an invisible block-level element in the flow. This can\naffect the layout by breaking the current paragraph. To avoid this,\nyou can wrap the <code>place</code> call in a <a href=\"/en-US-v0.13.1/reference/layout/box/\" title=\"`box`\"><code>box</code></a> when the call is made\nin the middle of a paragraph. The alignment and offsets will then be\nrelative to this zero-size box. To make sure it doesn't interfere with\nspacing, the box should be attached to a word using a word joiner.</p>\n<p>For example, the following defines a function for attaching an annotation\nto the following word:</p>\n<div class=\"previewed-code\"><pre><code><span class=\"typ-key\">#</span><span class=\"typ-key\">let</span> <span class=\"typ-func\">annotate</span><span class=\"typ-punct\">(</span><span class=\"typ-op\">..</span>args<span class=\"typ-punct\">)</span> <span class=\"typ-op\">=</span> <span class=\"typ-punct\">{</span>\n  <span class=\"typ-func\">box</span><span class=\"typ-punct\">(</span><span class=\"typ-func\">place</span><span class=\"typ-punct\">(</span><span class=\"typ-op\">..</span>args<span class=\"typ-punct\">)</span><span class=\"typ-punct\">)</span>\n  sym<span class=\"typ-punct\">.</span>wj\n  <span class=\"typ-func\">h</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">0pt</span><span class=\"typ-punct\">,</span> weak<span class=\"typ-punct\">:</span> <span class=\"typ-key\">true</span><span class=\"typ-punct\">)</span>\n<span class=\"typ-punct\">}</span>\n\nA placed <span class=\"typ-func\">#</span><span class=\"typ-func\">annotate</span><span class=\"typ-punct\">(</span><span class=\"typ-func\">square</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span><span class=\"typ-punct\">,</span> dy<span class=\"typ-punct\">:</span> <span class=\"typ-num\">2pt</span><span class=\"typ-punct\">)</span>\nsquare in my text.\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/40826a3ec000a798ea7be101e1b645d6.png\" alt=\"Preview\"></div></div>\n<p>The zero-width weak spacing serves to discard spaces between the function\ncall and the next word.</p>","example":null,"self":false,"params":[{"name":"alignment","details":"<p>Relative to which position in the parent container to place the content.</p>\n<ul>\n<li>If <code>float</code> is <code><span class=\"typ-key\">false</span></code>, then this can be any alignment other than <code><span class=\"typ-key\">auto</span></code>.</li>\n<li>If <code>float</code> is <code><span class=\"typ-key\">true</span></code>, then this must be <code><span class=\"typ-key\">auto</span></code>, <code>top</code>, or <code>bottom</code>.</li>\n</ul>\n<p>When <code>float</code> is <code><span class=\"typ-key\">false</span></code> and no vertical alignment is specified, the\ncontent is placed at the current position on the vertical axis.</p>","example":null,"types":["auto","alignment"],"strings":[],"default":"<code>start</code>","positional":true,"named":false,"required":false,"variadic":false,"settable":true},{"name":"scope","details":"<p>Relative to which containing scope something is placed.</p>\n<p>The parent scope is primarily used with figures and, for\nthis reason, the figure function has a mirrored <a href=\"/en-US-v0.13.1/reference/model/figure/#parameters-scope\"><code>scope</code>\nparameter</a>. Nonetheless, it can also be more generally\nuseful to break out of the columns. A typical example would be to\n<a href=\"/en-US-v0.13.1/guides/page-setup-guide/#columns\">create a single-column title section</a>\nin a two-column document.</p>\n<p>Note that parent-scoped placement is currently only supported if <code>float</code>\nis <code><span class=\"typ-key\">true</span></code>. This may change in the future.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-key\">#</span><span class=\"typ-key\">set</span> <span class=\"typ-func\">page</span><span class=\"typ-punct\">(</span>height<span class=\"typ-punct\">:</span> <span class=\"typ-num\">150pt</span><span class=\"typ-punct\">,</span> columns<span class=\"typ-punct\">:</span> <span class=\"typ-num\">2</span><span class=\"typ-punct\">)</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">place</span><span class=\"typ-punct\">(</span>\n  top <span class=\"typ-op\">+</span> center<span class=\"typ-punct\">,</span>\n  scope<span class=\"typ-punct\">:</span> <span class=\"typ-str\">&quot;parent&quot;</span><span class=\"typ-punct\">,</span>\n  float<span class=\"typ-punct\">:</span> <span class=\"typ-key\">true</span><span class=\"typ-punct\">,</span>\n  <span class=\"typ-func\">rect</span><span class=\"typ-punct\">(</span>width<span class=\"typ-punct\">:</span> <span class=\"typ-num\">80%</span><span class=\"typ-punct\">,</span> fill<span class=\"typ-punct\">:</span> aqua<span class=\"typ-punct\">)</span><span class=\"typ-punct\">,</span>\n<span class=\"typ-punct\">)</span>\n\n<span class=\"typ-func\">#</span><span class=\"typ-func\">lorem</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">25</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/f718445c168dda0dcdf558eeec653317.png\" alt=\"Preview\"></div></div>","types":["str"],"strings":[{"string":"column","details":"<p>Place into the current column.</p>"},{"string":"parent","details":"<p>Place relative to the parent, letting the content span over all columns.</p>"}],"default":"<code><span class=\"typ-str\">&quot;column&quot;</span></code>","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"float","details":"<p>Whether the placed element has floating layout.</p>\n<p>Floating elements are positioned at the top or bottom of the parent\ncontainer, displacing in-flow content. They are always placed in the\nin-flow order relative to each other, as well as before any content\nfollowing a later <a href=\"/en-US-v0.13.1/reference/layout/place/#definitions-flush\" title=\"`place.flush`\"><code>place.flush</code></a> element.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-key\">#</span><span class=\"typ-key\">set</span> <span class=\"typ-func\">page</span><span class=\"typ-punct\">(</span>height<span class=\"typ-punct\">:</span> <span class=\"typ-num\">150pt</span><span class=\"typ-punct\">)</span>\n<span class=\"typ-key\">#</span><span class=\"typ-key\">let</span> <span class=\"typ-func\">note</span><span class=\"typ-punct\">(</span>where<span class=\"typ-punct\">,</span> body<span class=\"typ-punct\">)</span> <span class=\"typ-op\">=</span> <span class=\"typ-func\">place</span><span class=\"typ-punct\">(</span>\n  center <span class=\"typ-op\">+</span> where<span class=\"typ-punct\">,</span>\n  float<span class=\"typ-punct\">:</span> <span class=\"typ-key\">true</span><span class=\"typ-punct\">,</span>\n  clearance<span class=\"typ-punct\">:</span> <span class=\"typ-num\">6pt</span><span class=\"typ-punct\">,</span>\n  <span class=\"typ-func\">rect</span><span class=\"typ-punct\">(</span>body<span class=\"typ-punct\">)</span><span class=\"typ-punct\">,</span>\n<span class=\"typ-punct\">)</span>\n\n<span class=\"typ-func\">#</span><span class=\"typ-func\">lorem</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">10</span><span class=\"typ-punct\">)</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">note</span><span class=\"typ-punct\">(</span>bottom<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>Bottom 1<span class=\"typ-punct\">]</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">note</span><span class=\"typ-punct\">(</span>bottom<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>Bottom 2<span class=\"typ-punct\">]</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">lorem</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">40</span><span class=\"typ-punct\">)</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">note</span><span class=\"typ-punct\">(</span>top<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>Top<span class=\"typ-punct\">]</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">lorem</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">10</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/b79489e3dba54a5087e52813387db424.png\" alt=\"Preview\"></div></div>","types":["bool"],"strings":[],"default":"<code><span class=\"typ-key\">false</span></code>","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"clearance","details":"<p>The spacing between the placed element and other elements in a floating\nlayout.</p>\n<p>Has no effect if <code>float</code> is <code><span class=\"typ-key\">false</span></code>.</p>","example":null,"types":["length"],"strings":[],"default":"<code><span class=\"typ-num\">1.5em</span></code>","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"dx","details":"<p>The horizontal displacement of the placed content.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-key\">#</span><span class=\"typ-key\">set</span> <span class=\"typ-func\">page</span><span class=\"typ-punct\">(</span>height<span class=\"typ-punct\">:</span> <span class=\"typ-num\">100pt</span><span class=\"typ-punct\">)</span>\n<span class=\"typ-key\">#</span><span class=\"typ-key\">for</span> i <span class=\"typ-key\">in</span> <span class=\"typ-func\">range</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">16</span><span class=\"typ-punct\">)</span> <span class=\"typ-punct\">{</span>\n  <span class=\"typ-key\">let</span> amount <span class=\"typ-op\">=</span> i <span class=\"typ-op\">*</span> <span class=\"typ-num\">4pt</span>\n  <span class=\"typ-func\">place</span><span class=\"typ-punct\">(</span>center<span class=\"typ-punct\">,</span> dx<span class=\"typ-punct\">:</span> amount <span class=\"typ-op\">-</span> <span class=\"typ-num\">32pt</span><span class=\"typ-punct\">,</span> dy<span class=\"typ-punct\">:</span> amount<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>A<span class=\"typ-punct\">]</span>\n<span class=\"typ-punct\">}</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/900a86ccdad2c8f732b5d603c1366069.png\" alt=\"Preview\"></div></div>\n<p>This does not affect the layout of in-flow content.\nIn other words, the placed content is treated as if it\nwere wrapped in a <a href=\"/en-US-v0.13.1/reference/layout/move/\" title=\"`move`\"><code>move</code></a> element.</p>","types":["relative"],"strings":[],"default":"<code><span class=\"typ-num\">0%</span> <span class=\"typ-op\">+</span> <span class=\"typ-num\">0pt</span></code>","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"dy","details":"<p>The vertical displacement of the placed content.</p>\n<p>This does not affect the layout of in-flow content.\nIn other words, the placed content is treated as if it\nwere wrapped in a <a href=\"/en-US-v0.13.1/reference/layout/move/\" title=\"`move`\"><code>move</code></a> element.</p>","example":null,"types":["relative"],"strings":[],"default":"<code><span class=\"typ-num\">0%</span> <span class=\"typ-op\">+</span> <span class=\"typ-num\">0pt</span></code>","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"body","details":"<p>The content to place.</p>","example":null,"types":["content"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["content"],"scope":[{"path":["place"],"name":"flush","title":"Flush","keywords":[],"oneliner":"Asks the layout algorithm to place pending floating elements before","element":true,"contextual":false,"deprecation":null,"details":"<p>Asks the layout algorithm to place pending floating elements before\ncontinuing with the content.</p>\n<p>This is useful for preventing floating figures from spilling\ninto the next section.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-func\">#</span><span class=\"typ-func\">lorem</span><span class=\"typ-punct\">(</span><span class=\"typ-num\">15</span><span class=\"typ-punct\">)</span>\n\n<span class=\"typ-func\">#</span><span class=\"typ-func\">figure</span><span class=\"typ-punct\">(</span>\n  <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-punct\">,</span> height<span class=\"typ-punct\">:</span> <span class=\"typ-num\">50pt</span><span class=\"typ-punct\">)</span><span class=\"typ-punct\">,</span>\n  placement<span class=\"typ-punct\">:</span> <span class=\"typ-key\">auto</span><span class=\"typ-punct\">,</span>\n  caption<span class=\"typ-punct\">:</span> <span class=\"typ-punct\">[</span>A rectangle<span class=\"typ-punct\">]</span><span class=\"typ-punct\">,</span>\n<span class=\"typ-punct\">)</span>\n\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">place</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">flush</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span>\n\nThis text appears after the figure.\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/f2aa79bdf50898cb675e77738d00ac35.png\" alt=\"Preview\"></div></div>","self":false,"params":[],"returns":["content"],"scope":[]}]}}}