【Typst】6.布局函数
概述
上节我们介绍了文档结构元素的函数，本节介绍一些控制布局使用的函数，掌握他们之后你可以更进一步的控制页面元素的布局。
系列目录
- 1.Typst概述
- 2.Typst标记语法和基础样式
- 3.Typst脚本语法
- 4.导入、包含和读取
- 5.文档结构元素与函数
- 6.布局函数
对齐
align(alignment, // 沿两个轴的对齐方式。默认：start + topcontent, // 要对齐的内容。
) -> content
alignment可能的值为：
start：在文本方向的开头对齐。end：在文本方向的末尾对齐。left：向左对齐。center：水平对齐。right：在右侧对齐。top：在顶部对齐。horizon：垂直对齐。bottom：在底部对齐。
整体使用：
#set align(center)
这是第一段 \
这是第二段 \
这是第三段 \
#align(left)[左对齐]
#align(center)[居中对齐]
#align(right)[右对齐]
#rect(width: 100%,height: 200pt
)[#align(left+top)[left+top]#align(center+horizon)[center+horizon]#align(right+bottom)[right+bottom]
]
旋转与角度
rotate(angle, // 旋转量，角度或弧度，默认为0degorigin: alignment, // 旋转的中心点，默认center + horizoncontent, // 要旋转的内容
) -> content
angle可以赋予：
- 角度值：如120deg，代表120°
- 弧度值：如1.57rad，代表1/2弧度，也就是90°
// 以默认旋转中心，顺时针旋转45°
#rotate(45deg)[#rect()[旋转的内容]
]
// 以默认旋转中心，逆时针旋转45°
#rotate(-45deg)[#rect()[旋转的内容]
]
// 以默认旋转中心，顺时针旋转1.57弧度
#rotate(1.57rad)[#rect()[旋转的内容]
]
// 以左上角为旋转中心，顺时针旋转30°
#rotate(30deg,origin: top+left)[#rect()[旋转的内容]
]
缩放和翻转（镜像）
scale(x: ratio, // 水平缩放因子,默认：100%y: ratio, // 垂直缩放因子,默认：100%origin: alignment, // 缩放变换的原点，默认：center + horizoncontent, // 要缩放的内容
) -> content
#rect(width:100%,
)[#set align(center)这里是原始效果// 水平翻转#scale(x:50%)[这里是水平压缩50%]#scale(x:150%)[这里是水平拉伸150%]#scale(x:-100%)[这里是水平翻转]// 垂直翻转#scale(y:50%)[这里是垂直压缩50%]#scale(y:450%)[这里是垂直拉伸450%]#scale(y:-100%)[这里是垂直翻转]
]
移动
move(dx: relative, // 水平位移dy: relative, // 垂直位移content, // 要移动的内容
) -> content
#rect(inset: 0pt, move(dx: 6pt, dy: 6pt,rect(inset: 8pt,fill: white,stroke: black,[这里是内容])
))
block和box
block和box都可以看作是一个容器，只不过：
- block是块级元素，无论宽度是否撑满页面宽度，始终是独占一行
- box是行内元素，可以在行内与文字进行混排
block(width: auto relative,height: auto relative,breakable: bool,fill: none color gradient pattern,stroke: none length color gradient stroke pattern dictionary,radius: relative dictionary,inset: relative dictionary,outset: relative dictionary,spacing: relative fraction,above: relative fraction,below: relative fraction,clip: bool,nonecontent,
) -> content
box(width: auto relative fraction,height: auto relative,baseline: relative,fill: none color gradient pattern,stroke: none length color gradient stroke pattern dictionary,radius: relative dictionary,inset: relative dictionary,outset: relative dictionary,clip: bool,nonecontent,
) -> content
分栏
columns(int, // 列数，默认为2gutter: relative, // 列间距，默认：4%content, // 分栏的内容
) -> content
强制换行可以用colbreak():
colbreak(weak:bool //如果为 true，则如果当前列已为空，则跳过列分隔符。默认：false
) -> content
局部分栏
#columns()[ //默认分两栏#("这里是一段重复文本" * 20)#colbreak() //强制分栏#("这里是一段重复文本" * 20)
]
整页分栏
#set page(columns: 2) // 设置当前页面整体分为两栏== 分栏#("这里是一段重复文本" * 20)
#colbreak() //强制分栏
#("这里是一段重复文本" * 20)
水平和垂直分布
stack(dir: direction, // 内容的排列方向,默认：ttbspacing: none relative fraction, // 内容间距relative fraction content, // 要排列二点内容
) -> content
dir可能的值为：
ltr：从左到右。rtl：从右到左。ttb：从上到下。btt：从下到上。
#stack(rect[第1个],rect[第2个],rect[第3个],
)
#stack(dir:direction.ltr, // 由左向右排列rect[第1个],rect[第2个],rect[第3个],
)
#stack(dir:direction.ltr,spacing: 5pt, // 设定水平间距rect[第1个],rect[第2个],rect[第3个],
)
水平和垂直间距
// 水平间距
h(relative fraction, // 间距值weak: bool,
) -> content
// 垂直间距
v(relativefraction, // 间距值weak: bool,
) -> content
随便写点什么 #h(2em) 后续的内容。
随便写点什么 #h(1fr) 后续的内容。\
随便写点什么2 #h(1fr) 后续的内容。
随便写点什么3 #v(1em) 后续的内容。
网格布局
grid(columns: auto int relative fraction array, // 列数或列设置rows: auto int relative fraction array, // 行数或行设置gutter: auto int relati vefraction array, // 行列间距column-gutter: auto int relative fraction array, // 列间距，优先于 gutterrow-gutter: auto int relative fraction array, // 行间距，优先于 guttercontent, // 布局的子项
) -> content
#grid(columns: 2,rect[12],rect[12],rect[12],rect[12]
)
// 统一设置rect的样式
#set rect(width: 100%,height: 100pt
)#grid(columns: (100pt,1fr), // 左侧宽100pt，右侧为页面剩余宽度rect[1],rect[2],rect[3],rect[4]
)
#set rect(width: 100%,height: 100pt
)#grid(columns: (100pt,1fr),gutter: 5pt, // 统一设置行列间距rect[1],rect[2],rect[3],rect[4]
)
绝对定位
place()用于将内容绝对定位。
place(auto alignment, // 位置，默认：startfloat: bool, // 是否浮动布局，默认：falseclearance: length, // 放置的元素在浮动布局中的间隙量。默认：1.5emdx: relative, // 水平位移dy: relative, // 垂直位移content, // 定位的内容
) -> content
隐藏
hide(content // 要隐藏的内容
) -> content
重复
repeat(content // 要重复的内容
) -> content
内容边距
pad(left: relative, top: relative,right: relative,bottom: relative,x: relative,y: relative,rest: relative,content,
) -> content
#rect()[ // 外部矩形#pad( left:100pt, // 左侧边距100ptrect( // 内部矩形width: 100%,height: 100pt,fill: rgb("#eee"),[左侧边距100pt]))
]
#rect()[ // 外部矩形#pad( rest:100pt, // 统一边距100ptrect( // 内部矩形width: 100%,height: 100pt,fill: rgb("#eee"),[统一边距100pt]))
]
#rect()[ // 外部矩形#pad( x:100pt, // 左右边距100ptrect( // 内部矩形width: 100%,height: 100pt,fill: rgb("#eee"),[左右边距100pt]))
]
