How can I prevent an HTML p tag from being generated magically in this scenario?

Questions
1

source

// source.typ
#html.canvas(
  style: "width: 100%; height: 30vh;",
  id: "canvas1",
 )

outputs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

<!-- canvas is what I need, not the p element wrapper. -->
    <p><canvas style="width: 100%; height: 30vh;" id="canvas1"></canvas></p>
</body>

</html>

If anyone has run into similar problems, please share your solutions. Any help would be greatly appreciated.

2

When creating custom reusable components, you can and should take charge over whether Typst creates paragraphs. By wrapping text in a block instead of just adding paragraph breaks around it, you can force the absence of a paragraph. Conversely, by adding a parbreak after some content in a container, you can force it to become a paragraph even if it’s just one word. This is, for example, what non-tightlists do to force their items to become paragraphs.

Paragraph - Typst Documentation

Try block(html.canas(…)). It will remove <p>. (Note that display: block will be added, but that’s usually okay.)

2 Likes