Preview Tool: Font Preview Panel #201
Description
We may have a bunch of preview tools. Let us start with a font preview panel. It is for creating show/set rules interactively about text elements with more preview feature.
The font preview panel may not be useful for experienced typst users, but may be intuitive and greatly help those users who don't know font things in typst at all.
I have made an interface design in typst:
-
It has copy buttons. Or it is also possible to insert into editor directly (need editor support).
The copy content is:
-
It can show effect of font settings with some typst script:
-
It can set font size in hao unit (字号). Some other size system is reasonable, such as font size used by material design.
PS: I think it is less useful that font preview, and we can have another set of show rules about font sizes individually.
-
It has a font filter, which could filter fonts by features.
languages
Notably, we can have
MathLanguage for typst's technique writing. Some good default dummy preview text is also availableGood math font for typst example:
Bad math font for typst example:
#box(width: 100%, fill: luma(240), inset: 5pt, { ( src-button[copy as | show rule], src-button[set rule], src-button[font args], src-button[size args], ).join(h(0.5em)) v(-0.5em) ```typ #show math.equation: set text(font: ("Linux Libertine")) ``` }) #rect(width: 100%, inset: 1em, radius: 2pt)[ #show math.equation: set text(font: ("Linux Libertine")) $ "Test goodness of that font:" lr((integral x dif x)) $ ]
styles
filter it by styles, such as whether it is a monospace font or has a decorative stroke with sans-serif.
-
It can select multiple fonts at the same time. Also show list of font by names and in corresponding font.
Notably, it can also pick up more font paths for previewing by dialog box.
Source code of interface design:
#let src-button(content) = box(fill: blue.lighten(80%), inset: (top: 4pt, bottom: 4pt, rest: 5pt), radius: 5pt, content)
#let dropdown(content, drop-icon: [\u{2228}], width: auto) = stack(dir: ltr,
rect(content, height: 1.5em, stroke: 0.5pt, width: width), rect(height: 1.5em, fill: yellow.lighten(95%), stroke: 0.5pt, drop-icon))
#box(width: 100%, fill: luma(240), inset: 5pt, {
(
src-button[copy as | show rule],
src-button[set rule],
src-button[font args],
src-button[size args],
).join(h(0.5em))
v(-0.5em)
```typ
#let rule_textN(content) = {
set text(
font: ("Linux Libertine", "Source Sans Pro"),
size: 10.5pt /* 五号字体 */,
)
content
}
```
})
#rect(width: 100%, inset: 1em, radius: 2pt, stroke: none)[
#let rule_textN(content) = {
set text(
font: ("Linux Libertine", "Source Sans Pro"),
size: 10.5pt /* 五号字体 */,
)
content
}
#show: rule_textN
#set text(font: ("Linux Libertine", "Source Sans Pro"))
#align(center)[测试 中文 和 English 混排]
]
#rect(width: 100%, radius: 2pt)[
#set text(black.lighten(50%), font: "Inconsolata")
Preview text: type something......
]
#v(-0.5em)
#rect(width: 100%, radius: 2pt)[
#stack(dir: ltr, spacing: 0.5em,
align(horizon)[Font scale:],
box(stroke: 0.5pt, inset: 5pt, height: 1.5em)[10.5#text(fill: black.lighten(65%))[pt]],
dropdown[五号],
align(horizon)[select as:],
dropdown[号],
align(horizon)[into unit:],
dropdown[pt],
)
#v(-0.5em)
#stack(dir: ltr, spacing: 0.5em,
align(horizon)[or set as variable:],
dropdown[none],
)
PS: Some people like `#import "font-size.typ": font-size.五号`
]
#v(-0.5em)
#rect(width: 100%, radius: 2pt)[
== Font Filter (will affect Font selection)
#stack(dir: ltr, spacing: 0.5em,
align(horizon)[Language:],
dropdown[Chinese (Simplified)],
)
#v(-0.5em)
#stack(dir: ltr, spacing: 0.5em,
align(horizon)[Style:],
dropdown[Monospace],
dropdown[Sans serif],
)
]
#v(-0.5em)
#rect(width: 100%, radius: 2pt, {
[== Font selection]
v(0.2em)
let dropdown = dropdown.with(width: 100% - 1em - 3pt)
(
dropdown[font1 #text(font: ("Source Sans Pro"), "思源黑体")],
dropdown[font2 #text(font: ("Linux Libertine"), "Linux Libertine")],
dropdown(drop-icon: [\+])[more fonts],
).join(v(-0.5em))
place(right + top, (
src-button[Configure path to fonts],
src-button[Font Preview],
).join(h(0.5em)))
})