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.
Problem
The
:::challengecustom container uses a<details>/<summary>HTML block to hide answers behind a collapsible element: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
@media printrule to force<details>open when printing:renderer/src/main.rs, expand all<details>elements (add theopenattribute) when post-processingprint.htmlandsingle.html.single.html.