Skip to content

Enclose scribble parts in an html section tag #520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

stevebyan
Copy link
Contributor

@stevebyan stevebyan commented Jun 28, 2025

Enhance the Scribble html renderer to enclose the @title, @section, @subsection, etc parts in an html <section> tag. This enables better support for assistive technologies, and some CSS layout strategies such as a "block-based" design. For the latter, see Shriram Krishnamurthi's thread on the Racket Discord.

The section tag class attribute is set to the level of the part in the of SsectionLevel<n>, and the id attribute is set to section <the section number>. The id attribute is necessary for "block-based" design.

Section tag class attribute is set to the level of the part and id attribute is set to 'section <the section number>'.
@stevebyan stevebyan marked this pull request as draft June 28, 2025 01:33
@stevebyan
Copy link
Contributor Author

This has been only lightly tested. Volunteers welcome.

I should add the new class names to the Scribble docs for the CSS classes. I don't see any place in the current documentation where it would be appropriate to document the format of the id attribute for the <section> tag. Suggestions would be welcome.

@stevebyan
Copy link
Contributor Author

Oops, looks like I have some more work to do, some tests are failing.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resyntax analyzed 1 file in this pull request and found no issues.

@stevebyan stevebyan marked this pull request as ready for review June 29, 2025 14:40
Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resyntax analyzed 1 file in this pull request and found no issues.

@mflatt
Copy link
Member

mflatt commented Jun 30, 2025

One thought/question: The CSS class name associated with a section tag in this PR is based on the absolute level of the section within the document, as opposed to the relative level on a rendered page. For example, the header at the top of https://docs.racket-lang.org/reference/eval-model.html is at level 2, while the header at the top of https://docs.racket-lang.org/pkg/getting-started.html is at level 1, but those render the same (with h2, currently) because they're at the level relative to the page. Would the class be more useful for styling if it were relative to the output page? Or maybe both an absolute class name and a relative class name would be useful?

@stevebyan
Copy link
Contributor Author

stevebyan commented Jun 30, 2025

@mflatt that's a good point. How might I implement relative levels, just subtract part-nesting-depth from number-depth?

Since the class is purely for page layout, not sematics, it makes sense to me to just have relative levels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants