Styling FreeBSD documentation (articles, books, wiki …)

grahamperrin

grahamperrin

 
Can a user style move tables of contents to the left of articles?

For use with e.g. Stylus. Thanks.
1639784733104.png

<https://docs.freebsd.org/en/articles>
 
Probably but you need to look at <main> and see how that is styling the child elements. They, too, are probably controlled by the flex property. It's the flex property that determines the position of all that under <main>.

What link is that?
 
grahamperrin said:
What should I type?
Click to expand...
I don't know Stylus, but basically you have to add the new property to the <main> element (which has the class main-wrapper-article). In CSS this would look like this:
CSS: 
.main-wrapper-article {
    flex-direction: row-reverse;
}

Edit: Looking at https://github.com/openstyles/stylus/wiki/Writing-UserCSS#more-examples, something like
CSS: 
@-moz-document domain("docs.freebsd.org") {
  main.main-wrapper-article {
    flex-direction: row-reverse !important;
  }
}
should work.
 
Some documentation (a minority?) does already have tables of contents to the left.

For these pages, version 1.0.1 of the user style is quite blunt – the reversal has an unwanted effect (tables of contents to the right):

1639821905421.png

For now, I can't be bothered to work around the exceptional pages. Let's wait until there's consistency of style with originals.
 
grahamperrin said:
For now, I can't be bothered to work around the exceptional pages.
Click to expand...
This could be done by using the order property instead. See the link i posted earlier.
In addition to reversing the order in which flex items are visually displayed, you can target individual items and change where they appear in the visual order with the order property.
Click to expand...

To do so, remove the style for the <main> element and use this:
CSS: 
.main-wrapper-article .article-toc,
.main-wrapper-book .book-toc {
    order: 1 !important;
}

.main-wrapper-article .article,
.main-wrapper-book .book {
    order: 2 !important;
}
This results in the TOC always to be to the left, regardless of its position in the source code.

I don't know if every book uses the same CSS classes, you might have to add some more.

But yes, this is only a workaround, it would be better if there was consistency of style. Maybe worth a PR?
 
eternal_noob said:
… TOC always to be to the left, regardless of its position in the source code. …
Click to expand...

Thanks. Version 1.0.2 includes your suggested code.

Better! For some pages (some types of book?) there remains a split – Table of Contents stranded to the right of (not above) Book chapters– but essentially, it's good to have the main text to the right. <https://docs.freebsd.org/en/books/fdp-primer/writing-style/#one-sentence-per-line> for example:

1639900073576.png

Also version 1.0.2 might work around a bug that causes required content to fall behind the banner. Without the user style:

1639900357784.png
 
A more exotic experiment (involving an extension).

CSS: 
{
    visibility: hidden !important;
}

How can I apply that to <aside class="toc">?

1641045400515.png
 
CSS: 
aside.toc
{
    visibility: hidden !important;
}

But in order to hide the TOC i'd rather use display: none;.
  • visibility: hidden; hides the element, but it still takes up space in the layout. Child element of a hidden box will be visible if their visibility is set to visible.
  • display: none; turns off the display and removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. All child elements also have their display turned off, even if their display property is set to something other than none.
 
You must log in or register to reply here.
Back
Top