Open Myriad-Dreamin opened 10 months ago
Can we see this demo somewhere?
No, it is painted in typst an this issue is for attracting people for discussion. Also I will be happy if there is a new contributor here to implement a font preview panel, since it is not quite hart to implement a frontend for font previewing.
We may not have to preview something. For example, font scale doesn't quite need for preview, since typst has powerful scripting and packages. Some package may provide a hao
function to help specify font size in hao, let font-size = hao("小初" or "一号" or "五号")
.
Instead, we may need:
These features are useful so that users may bring more access to the font preview panel, so that we don't ask "why do we need it?".
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
Math
Language 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:
})
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)) $ ]
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:
})
rect(width: 100%, inset: 1em, radius: 2pt, stroke: none)[
let rule_textN(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,
)
v(-0.5em)
stack(dir: ltr, spacing: 0.5em,
) 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,
)
v(-0.5em)
stack(dir: ltr, spacing: 0.5em,
) ]
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))) })