{"route":"/en-US-v0.14.1/reference/layout/alignment/","title":"Alignment","description":"Documentation for the Alignment type.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"2d-alignments","name":"2D alignments","children":[]},{"id":"fields","name":"Fields","children":[]},{"id":"definitions","name":"Definitions","children":[{"id":"definitions-axis","name":"Axis","children":[]},{"id":"definitions-inv","name":"Inverse","children":[]}]}],"body":{"kind":"type","content":{"name":"alignment","title":"Alignment","keywords":[],"oneliner":"Where to align something along an axis.","details":"<p>Where to align something along an axis.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code>start</code>: Aligns at the <a href=\"/en-US-v0.14.1/reference/layout/direction/#definitions-start\">start</a> of the <a href=\"/en-US-v0.14.1/reference/text/text/#parameters-dir\">text\ndirection</a>.</li>\n<li><code>end</code>: Aligns at the <a href=\"/en-US-v0.14.1/reference/layout/direction/#definitions-end\">end</a> of the <a href=\"/en-US-v0.14.1/reference/text/text/#parameters-dir\">text\ndirection</a>.</li>\n<li><code>left</code>: Align at the left.</li>\n<li><code>center</code>: Aligns in the middle, horizontally.</li>\n<li><code>right</code>: Aligns at the right.</li>\n<li><code>top</code>: Aligns at the top.</li>\n<li><code>horizon</code>: Aligns in the middle, vertically.</li>\n<li><code>bottom</code>: Align at the bottom.</li>\n</ul>\n<p>These values are available globally and also in the alignment type's scope,\nso you can write either of the following two:</p>\n<div class=\"previewed-code\"><pre><code><span class=\"typ-func\">#</span><span class=\"typ-func\">align</span><span class=\"typ-punct\">(</span>center<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>Hi<span class=\"typ-punct\">]</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">align</span><span class=\"typ-punct\">(</span>alignment<span class=\"typ-punct\">.</span>center<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>Hi<span class=\"typ-punct\">]</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.14.1/assets/669ac68cb04f4942797f66b87e297c20.png\" alt=\"Preview\"></div></div>\n<h2 id=\"2d-alignments\">2D alignments</h2>\n<p>To align along both axes at the same time, add the two alignments using the\n<code>+</code> operator. For example, <code>top + right</code> aligns the content to the top right\ncorner.</p>\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\">3cm</span><span class=\"typ-punct\">)</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">align</span><span class=\"typ-punct\">(</span>center <span class=\"typ-op\">+</span> bottom<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>Hi<span class=\"typ-punct\">]</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.14.1/assets/5f766b5749e7d5181e3d6b4854c0785e.png\" alt=\"Preview\"></div></div>\n<h2 id=\"fields\">Fields</h2>\n<p>The <code>x</code> and <code>y</code> fields hold the alignment's horizontal and vertical\ncomponents, respectively (as yet another <code>alignment</code>). They may be <code><span class=\"typ-key\">none</span></code>.</p>\n<div class=\"previewed-code\"><pre><code><span class=\"typ-punct\">#</span><span class=\"typ-punct\">(</span>top <span class=\"typ-op\">+</span> right<span class=\"typ-punct\">)</span><span class=\"typ-punct\">.</span><span class=\"typ-pol\">x</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">left</span><span class=\"typ-punct\">.</span><span class=\"typ-pol\">x</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">left</span><span class=\"typ-punct\">.</span><span class=\"typ-pol\">y</span> (none)\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.14.1/assets/79cafc257ee34674474ab3a53a1c3047.png\" alt=\"Preview\"></div></div>","constructor":null,"scope":[{"path":["alignment"],"name":"axis","title":"Axis","keywords":[],"oneliner":"The axis this alignment belongs to.","element":false,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"<p>The axis this alignment belongs to.</p>\n<ul>\n<li><code><span class=\"typ-str\">&quot;horizontal&quot;</span></code> for <code>start</code>, <code>left</code>, <code>center</code>, <code>right</code>, and <code>end</code></li>\n<li><code><span class=\"typ-str\">&quot;vertical&quot;</span></code> for <code>top</code>, <code>horizon</code>, and <code>bottom</code></li>\n<li><code><span class=\"typ-key\">none</span></code> for 2-dimensional alignments</li>\n</ul>"},{"kind":"example","content":{"body":"<div class=\"previewed-code\"><pre><code><span class=\"typ-pol\">#</span><span class=\"typ-pol\">left</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">axis</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">bottom</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">axis</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.14.1/assets/387aae8b6112fd14679b1c8e65d15622.png\" alt=\"Preview\"></div></div>","title":null}}],"self":true,"params":[],"returns":["none","str"],"scope":[]},{"path":["alignment"],"name":"inv","title":"Inverse","keywords":[],"oneliner":"The inverse alignment.","element":false,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"<p>The inverse alignment.</p>"},{"kind":"example","content":{"body":"<div class=\"previewed-code\"><pre><code><span class=\"typ-pol\">#</span><span class=\"typ-pol\">top</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">left</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">center</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-punct\">#</span><span class=\"typ-punct\">(</span>left <span class=\"typ-op\">+</span> bottom<span class=\"typ-punct\">)</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.14.1/assets/b41031486714772a203469f697c3e6fd.png\" alt=\"Preview\"></div></div>","title":null}}],"self":true,"params":[],"returns":["alignment"],"scope":[]}]}}}