Heading attributes

[ekhjarta]

Hi. I’m experimenting with the online sandbox and I get confused when I try to apply attributes to headings.

If I set custom attributes and don’t include an id it works as I expect: I get attributes on the resulting <h1> tag. However, if I add a custom id the id and all other attributes are moved to the <section> tag instead. Is this expected? How do I apply attributes to the heading if I also want to give it a custom id.

{.h}
# hi

{.h #h}
# hi2

{.h}
{#h}
# hi3

results in

<section id="hi">
<h1 class="h">hi</h1>
</section>
<section class="h" id="h">
<h1>hi2</h1>
</section>
<section class="h" id="h">
<h1>hi3</h1>
</section>

[jgm]

This is something that probably needs to be specified more explicitly.

Out of interest, though, why is it necessary to put an ID on the heading itself?

[ekhjarta]

I want a custom id for the heading/section to make it shorter, easier to remember and robust against reformulating the heading text.

I don’t care if the id ends up on the section or the heading. Either is fine by me.

What surprised me was that the rest of the attributes moves from the heading to the section when I add an id. Here I do want them on the heading to make it easy to style the heading. Always having it on the section also works. Having it either on the heading or the section is surprising and a bit cumbersome.

[Omikhleia]

Out of interest, though, why is it necessary to put an ID on the heading itself?

Just my two cents, if I understand the question right
I also usually have my own ids on headers I want to reference:

• possibly shorter (for long headers)...
• More reliable (what if I slightly rephrase the heading later...)
• in general less ambiguous (I might have several "Configuration" subsections in a document. Which one I am referring too?)

This being said, the ambiguity where this id and header attributes end up was also evoked here: #213 (comment) (EDIT: ie. whether on the section or header AST element)

[tonyalaribe]

I am also having a lot of trouble with the section wrappers. My reason for using djot was to have more flexibility in styling my content without resulting in inline HTML. The section breaks the flow of things, since the resulting HTML doesn't closely map to the markdown anymore.

My question is, what is the rationale for auto-adding sections? Can it be opt-out? Or only added if an ID isn't attached to a heading?

[jgm]

What styling are you unable to do because of this? You can still style headers by id, e.g. #identifier > h2.

Adding the section wrappers provides more flexibility (it gives you information about where a section ends, not just where it stops, which may be useful for some purposes). It's also good practice to use these in HTML.

[tonyalaribe]

I use tailwindcss https://tailwindcss.com/ which requires adding the classes directly as attributes on the element, not writing raw CSS. So that causes the challenge.

[jgm]

It's hard to know what the best approach is here. In pandoc (with --section-divs) we move the identifier to the section, and other attributes are put on both the section and the heading. But I imagine that wouldn't work either for you, because adding the tailwind classes to both would produce bad results.

Another option would be just to move the identifier, and leave everything else on the heading. But that makes it impossible to add classes to sections or style them. (The current method doesn't make this impossible to style the headings, it just makes it impossible to do this without using tailwind classes.)

[tonyalaribe]

Yeah, I see what you mean. But for my usecase, the sections are more trouble than useful. Since I'm not writing prose, but actually writing interactive feature pages.

I'm building a djot parser to render this webpage below, and had to skip implementing sections for this reason.
When there's a heading, everything below it is nested under the section of the heading.
In the screenshot below, "Find and fix Errors and Breaking Changes in realtime." is a h1, but I want its scope to end early, after the youtube video. So I can have that pretty background image which separates the sections. But with the default interpretation, there's no way to end the section early, until the next heading, which is "Trace Errors back to the Root Cause" (h2)