Skip to content

Challenge containers: answers hidden in print/single-page version #182

@avivace

Description

@avivace

Problem

The :::challenge custom container uses a <details>/<summary> HTML block to hide answers behind a collapsible element:

<details>
  <summary>Answer (Click me!)</summary>
  ...
</details>

Browsers do not expand <details> elements when printing, and the element is collapsed by default in the single-page version (single.html) as well. This means answers are completely inaccessible in both the printable and single-page versions of the tutorial, making those versions less useful for educators and offline readers.

Expected behaviour

Answers should be visible (i.e. the <details> element should be expanded) in the print page (print.html) and single-page version (single.html).

Possible fixes

  • CSS: add a @media print rule to force <details> open when printing:
    @media print {
      details { display: block; }
      details summary { display: none; } /* hide the "Click me!" prompt */
    }
  • Renderer post-processing: in renderer/src/main.rs, expand all <details> elements (add the open attribute) when post-processing print.html and single.html.
  • Both: the CSS fix covers the print stylesheet; the renderer fix covers single.html.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions