Why don't headings display segment numbers (ids)?

When “Main” references are turned on, we see all of the segment numbers except those for headings and sub-headings. Those segment numbers exist and will even work if used. For example,

https://suttacentral.net/dn2/en/sujato#dn2:56.0

Will take you right to where you want:

But you have to dig into the html to find them.

I realize that displaying them is kind of ugly, especially because there may already be numbers that are a visible part of the text of the heading.

However if I want beauty, I will turn off the segment numbers completely :grin:

In practice this means it’s not easy to link to a section heading. Instead I have to link to the first segment in the heading. Or I have to go digging in the code.

To be clear, I’m not talking about the numbers that appear in the text of the heading as discussed in this old thread.

Bhante @Sujato, is there a reason it’s like this? Are you open to changing how it works so the segments are displayed?

3 Likes

As I’m getting closer to needing this feature, I played around with the css for the site.

It appears that the only thing keeping the heading ids from displaying is css. So to display them, you just need to add this custom css into a plugin like Stylus:

h2 .reference, h3 .reference, h4 .reference, h5 .reference{
    display:inline
}

If you have this added, the following link will take you to heading 4.2:
https://suttacentral.net/dn1/en/sujato#3.45.0

But if you don’t, then it doesn’t work. Why? Because there are ids for segments and there are ids for the segment numbers. I somehow never noticed this before. So for example, this is the html:

<span class="segment" id="dn1:3.45.0">
	<span class="reference">
		<a class="sc refFocused" id="3.45.0" href="#3.45.0" title="SuttaCentral segment number">3.45.0
		</a>
	</span>
	<span class="translation" lang="en">
		<span class="text">4.2. Conditioned by Contact 
		</span>
	</span>
	<span class="root" lang="pli" translate="no">
		<span class="text">4.2. Phassapaccayāvāra 
		</span>
	</span>
</span>

What I didn’t know was that if an html element with an id is hidden using css, then that id won’t be linkable. So strange.

If I want to actually link to this spot, instead of using the id for the segment number, I need to use the id for the segment. Because the segment numbers for the headings are always hidden. So this:
https://suttacentral.net/dn1/en/sujato#dn1:3.45.0

Notice thr dn1:

2 Likes

I mean, it’s not that strange in the sense that the CSS can move an element anywhere around the page, so to scroll an element into view, the browser obviously needs to load the CSS and lay out the page to find out where to scroll to… and if an element isn’t on the page at all, it isn’t so strange that it just wouldn’t scroll at all (even if we might prefer it to scroll to where that element would be if it were displayed)

2 Likes

I guess it’s strange to me that css could break a link. But I get why it works like that.

Perhaps what is strange is that the built in segment linking system is linking to segment numbers and not segments. I’m guessing that links to pages are processed so that if the url includes an anchor that that type of ref is rendered visible.

2 Likes

Well, there are empty segments right? Like some Pāḷi repetitions that Bhante’s translation skips over? So if the user is viewing English-only, those segment elements still wouldn’t exist…

They exist. They just contain no content.

Any way, this is all kind of separate from the issue of headings not showing their segment numbers.

I realize that I could just be linking to the first text segment under the heading. But if I’m trying to reference the whole section, that doesn’t seem appropriate.

2 Likes

it seems that you can’t link to a div which is set to 'display:none;'

There are many way of hiding things. Some of which remove the box model, and therefore the link.

It might be necesary to make the references height:1px; width:1px; overflow hidden; and have it toggle to height:auto; width:auto; when the refs are shown.

2 Likes