概述

上节我们介绍了文档结构元素的函数，本节介绍一些控制布局使用的函数，掌握他们之后你可以更进一步的控制页面元素的布局。

系列目录

• 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]))
]