Skip to content
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

Use an NBSP between outline number and text #3665

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

rpavlik
Copy link
Contributor

@rpavlik rpavlik commented May 21, 2020

Makes the TOC more appealing for OpenXR specification, at least. We have sections that start with a long "word".

Before:

Screenshot from 2020-05-21 13-21-46

After:

Screenshot from 2020-05-21 13-21-19

This has bugged me for a while, but hadn't gotten around to poking it until now. Ideally we could do this via stylesheet, which we can override easily, but I'm not sure of a way to do that offhand.

cc @oddhack

Makes the TOC more appealing for OpenXR specification,
at least, where we have sections that start with a long "word"
@mojavelinux
Copy link
Member

I don't want to add HTML hacks to the built-in HTML. This is something that needs to be handled by the stylesheet.

@rpavlik
Copy link
Contributor Author

rpavlik commented May 22, 2020

For future reference, my crude attempt to do an equivalent thing in javascript is the following:

const toc = document.querySelectorAll('#toc.toc2 li a');
for (let elt of toc) {
  let words = elt.innerHTML.split(' ');
  /* if this is a numbered section */
  if (words.length > 1 && words[0].endsWith('.')) {
    /* don't split the number from the first word of the title */
    elt.innerHTML = elt.innerHTML.replace(words[0] + ' ', words[0] + ' ');
  }
}

Sticking this in my footer docinfo is not great but it's a lot better than forking the asciidoctor source.

@mojavelinux
Copy link
Member

It would be better to use CSS than to hack the HTML. CSS has the capability to split words if they don't fit on the line. This is not the proper use of the   character.

@mojavelinux
Copy link
Member

I'll poke around a bit and see if I can offer a proper solution.

You certainly shouldn't have to resort to JavaScript. After all, you can modify the converter using the API or templates if you really want to change the HTML. See https://github.com/asciidoctor/asciidoctor.org/issues/80

@mojavelinux
Copy link
Member

I looked into this and the only way I can see to do it (without using  ) is to wrap the section number and trailing space in a span with the class sectnum. Then we can apply the following style to it:

#toc .sectnum {
  white-space: nowrap;
}

I also think we should add word-wrap: break-word to the TOC so that long words are broken instead of causing horizontal scrolling.

@mojavelinux
Copy link
Member

Since this requires a change to the HTML, it will need to be deferred to at least 2.1.

@mojavelinux mojavelinux deleted the branch asciidoctor:main October 23, 2021 07:57
@mojavelinux mojavelinux reopened this Oct 23, 2021
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.

None yet

2 participants