cetz.draw.content sizes content differently than box

[lars-reimann]

Since version v0.3.0, cetz's content handles descenders in text differently than Typst's built-in box, among other changes. Take the following code for example:

cetz.draw.content(
  (0, 0),
  box(stroke: 1pt + red, inset: 4pt, "t"),
  frame: "rect",
)

It draws a red frame around the text using box and a black frame using cetz.draw.content.

Behavior in v0.2.2:

Behavior in v0.3.1:

I was previously using the old behavior to create simple UML class diagrams, e.g in v0.2.2

It's built from a Typst grid wrapped in cetz.draw.content, which adds a rectangular frame. In v0.3.1 this instead looks like this:

Using text without descenders reduces the added padding but does not fully eliminate it, so there is also something else changed.

Now, I could create the frame using box, but this does not change the anchor points, so lines are then no longer connected to the bottom of the frame but end in empty space.

Is this change intended and if so, is there a way for me to restore the previous behavior?

[johannes-wolf]

The previous sizing should be restored by wrapping your content in text(bottom-edge: "baseline", ...).

[lars-reimann]

The previous sizing should be restored by wrapping your content in text(bottom-edge: "baseline", ...).

Perfect, that worked flawlessly. Feel free to close the issue if the change is intended.

[johannes-wolf]

The change was intended because of how inline math sizes. But maybe this should be a style key. I will convert this issue to a discussion.

[lars-reimann]

This seems to be somewhat similar to the box-sizing property of CSS.

[johannes-wolf]

Do you have some UML-Class diagram generation code you can share? I am also interested in doing this for very simple diagrams using Typst.

[lars-reimann]

Sure thing. I don't intend to publish this myself as a package, but whoever is interested can use/publish/enhance the code below:

Definitions

#import "@preview/cetz:0.3.1"

#let padding = 0.5em

#let class(
  position,
  name,
  key,
  width: auto,
  tag: none,
  fields: (),
  methods: (),
) = {
  let header-content = align(center, par(justify: false)[
    #if tag != none [
     _«#tag»_ \
    ]
    *#name*
  ])
  
  let field-content = par(justify: false, fields.join([#linebreak()]))
  let operation-content = par(justify: false, methods.join([#linebreak()]))
  let columns = if width == auto { 1 } else { (width, ) }

  let content = grid(
    columns: columns,
    inset: padding,
    header-content,
    grid.hline(),
    field-content,
    grid.hline(),
    operation-content
  )

  cetz.draw.content(
    position,
    text(bottom-edge: "baseline", content),
    name: key,
    frame: "rect",
  )
}

#let note(
  position,
  body,
  key,
  width: auto,
) = {
  let columns = if width == auto { 1 } else { (width, ) }

  let content = grid(
    columns: columns,
    inset: padding,
    par(justify: false, body),
  )

  cetz.draw.content(
    position,
    text(bottom-edge: "baseline", content),
    name: key,
    frame: "rect",
    fill: rgb(255, 255, 193),
  )

  cetz.draw.content(key + ".north-east", emoji.pin)
}

#let association(
  ..points
) = {
  cetz.draw.line(
    ..points,
    stroke: black, mark: (end: "straight", scale: 2)
  )
}

#let inheritance(
  ..points
) = {
  cetz.draw.line(
    ..points,
    stroke: black, mark: (end: ">", scale: 2)
  )
}

#let aggregation(
  ..points
) = {
  cetz.draw.line(
    ..points,
    stroke: black, mark: (start: "diamond", scale: 2)
  )
}


#let composition(
  ..points
) = {
  cetz.draw.line(
    ..points,
    stroke: black, mark: (start: "diamond", fill: black, scale: 2)
  )
}

Example usage

#import "@preview/cetz:0.3.1"

#import "../../../modules/keywords.typ" as kw
#import "../../../modules/uml.typ"

#let horizontal-spread = 5
#let vertical-spread = 2.8
#let width = 9em

#figure(
  caption: [...],
  cetz.canvas({
    import cetz.draw: *  

    uml.class(
      (-horizontal-spread, 0),
      "Client",
      "client",
      width: width,
    )

    uml.class(
      (0, 0),
      "Target",
      "target",
      tag: "interface",
      methods: (
        "+ changed()",
      ),
      width: width,
    )
    
    uml.class(
      (0, -vertical-spread),
      "Adapter",
      "adapter",
      fields: (
        "- adaptee: Adaptee",
      ),
      methods: (
        "+ changed()",
      ),
      width: width,
    )

    uml.class(
      (horizontal-spread, 0),
      "Adaptee",
      "adaptee",
      methods: (
        "+ original()",
      ),
      width: width,
    )

    uml.note(
      (horizontal-spread, -vertical-spread - 0.6),
      "adaptee.original()",
      "note",
    )

    uml.association(
      "client.east",
      "target.west",
    )

    uml.inheritance(
      "adapter.north",
      "target.south",
    )

    uml.composition(
      "adapter.east",
      (horizontal-spread / 2, -vertical-spread),
      (horizontal-spread / 2, 0),
      "adaptee.west",
    )

    line(
      (0.4, -vertical-spread - 0.6),
      "note.west",
      stroke: (dash: "dashed"),
    )
  })
)

Output