How would you build block-based programming visuals in Typst/CeTZ?

Questions
,
4

Hi everyone,

Thanks a lot for all the input – it really helped!

I ended up spending the whole day working with Typst’s path and curve functions instead of CeTZ, and that turned out to be the right decision. Using measure made it much easier to calculate the width and height of the content dynamically, so the blocks can now grow automatically depending on their inner elements.

Right now, I have a 1,538-line file that includes almost all Scratch-style blocks. They’re not pixel-perfect yet (especially some insets and indents), but overall I’m really happy with how it looks.

I’ve linked a Typst project and added a few screenshots so you can take a look and try it out yourself.

image
image1238×1848 292 KB

#ereignis[Wenn Flagge angeklickt][
  #setze-variable-auf(name: "Punkte", wert: 0)
  #verstecke-variable(name: "Punkte")
  #sage(text: "Quiz startet!", sekunden: 2)
  #frage(text: "Was ist 7 × 8?")
  #falls(
    gleich(antwort(), 56),
    dann-body: block[
      #ändere-variable-um(name: "Punkte", wert: 1)
      #sage(text: "Richtig!", sekunden: 2)
    ],
    sonst-body: sage(text: "Falsch! Es war 56.", sekunden: 2),
  )
  #frage(text: "Hauptstadt von Frankreich?")
  #falls(
    gleich(antwort(), "Paris"),
    dann-body: block[
      #ändere-variable-um(name: "Punkte", wert: 1)
      #sage(text: "Sehr gut!", sekunden: 2)
    ],
    sonst-body: sage(text: "Falsch! Es ist Paris.", sekunden: 2),
  )
  #sage(text: "Quiz beendet! Punkte anzeigen")
  #zeige-variable(name: "Punkte")
]

https://typst.app/project/R9Cs72LSOMsOe1rvz1OFCt

What I’d love to get feedback on now is how to best localize it – currently, all blocks are in German, and I’d prefer not to maintain separate 1,300+ line files for each language.

Thanks again for all your help — really excited to hear your thoughts!

Alex

8 Likes