1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6613],{2339:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>h,contentTitle:()=>d,default:()=>a,frontMatter:()=>l,metadata:()=>o,toc:()=>r});var n=i(85893),s=i(11151);const l={sidebar_position:1},d="Fit to Height / Width",o={id:"tutorials/utilities/fit-to",title:"Fit to Height / Width",description:"Thanks to ntjess for the code.",source:"@site/docs/tutorials/utilities/fit-to.md",sourceDirName:"tutorials/utilities",slug:"/tutorials/utilities/fit-to",permalink:"/docs/tutorials/utilities/fit-to",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/tutorials/utilities/fit-to.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Utilities",permalink:"/docs/category/utilities"},next:{title:"Build Your Own Theme",permalink:"/docs/tutorials/build-your-own-theme"}},h={},r=[{value:"Fit to Height",id:"fit-to-height",level:2},{value:"Fit to Width",id:"fit-to-width",level:2},{value:"Practical Example: Fitting a Table to the Slide",id:"practical-example-fitting-a-table-to-the-slide",level:2},{value:"Fitting a Heading to Full Width",id:"fitting-a-heading-to-full-width",level:2}];function c(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"fit-to-height--width",children:"Fit to Height / Width"}),"\n",(0,n.jsxs)(t.p,{children:["Thanks to ",(0,n.jsx)(t.a,{href:"https://github.com/ntjess",children:"ntjess"})," for the code."]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-height",children:"Fit to Height"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to make an image fill the remaining slide height, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-height"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-height(1fr)[BIG]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-height(\n width: none, prescale-width: none, grow: true, shrink: true, height, body\n) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use ",(0,n.jsx)(t.code,{children:"width: 50%"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"prescale-width"}),": This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use ",(0,n.jsx)(t.code,{children:"prescale-width: 200%"})," assuming the slide's width is twice the original."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"height"}),": The specified height."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-width",children:"Fit to Width"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to limit the title width to exactly fill the slide width, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-width"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-width(1fr)[#lorem(20)]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-width(grow: true, shrink: true, width, body) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": The specified width."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"practical-example-fitting-a-table-to-the-slide",children:"Practical Example: Fitting a Table to the Slide"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#slide[\n #utils.fit-to-height(1fr)[\n #table(\n columns: (1fr, 1fr, 1fr),\n [A], [B], [C],\n [1], [2], [3],\n [4], [5], [6],\n )\n ]\n]\n"})}),"\n",(0,n.jsx)(t.img,{alt:"Touying example output",src:i(70241).Z+"",width:"1684",height:"947"}),"\n",(0,n.jsx)(t.h2,{id:"fitting-a-heading-to-full-width",children:"Fitting a Heading to Full Width"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#slide[\n #utils.fit-to-width(1fr)[\n #text(weight: "bold")[A Very Long Presentation Title That Should Fill the Entire Slide Width]\n ]\n]\n'})}),"\n",(0,n.jsx)(t.img,{alt:"Touying example output",src:i(23365).Z+"",width:"1684",height:"947"})]})}function a(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},70241:(e,t,i)=>{i.d(t,{Z:()=>n});const n=i.p+"assets/images/60bd7782-ce986ccdbe64ab2d05f63970fdf5fe62.png"},23365:(e,t,i)=>{i.d(t,{Z:()=>n});const n=i.p+"assets/images/64e24a97-871958ace82341e9daf9c55a013a72a6.png"},11151:(e,t,i)=>{i.d(t,{Z:()=>o,a:()=>d});var n=i(67294);const s={},l=n.createContext(s);function d(e){const t=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),n.createElement(l.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.