Preview Tool: Font Preview Panel

[Myriad-Dreamin]

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 available

  Good 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)))
})

[Enter-tainer]

Can we see this demo somewhere?

[Myriad-Dreamin]

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:

• some typst tips in panel: so that we may help users that aren't familiar with font things at all.
  Pros: observed that most people asked questions about font configuring, and font preview panel is for them. It is a so-called interactive guidance.
• text for previewing: since we may want to test whether some math font works well in typst
  Pros: font preview may provides some good dummy text for math font previewing
• font filter: to quick locate the fonts meeting condition, e.g. Chinese fonts or math fonts.
  Pros: may be useful for looking for some fonts quickly
• font previewing: to take a glance at all of rendered result in that fonts.
  Pros: it shows result of all fonts, so that you don't have to try fonts one by one.

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?".