# Styling FreeBSD documentation (articles, books, wiki …)



## grahamperrin@ (Dec 17, 2021)

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

For use with e.g. Stylus. Thanks. 




<https://docs.freebsd.org/en/articles>


----------



## drhowarddrfine (Dec 18, 2021)

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@ (Dec 18, 2021)

grahamperrin said:


> <https://docs.freebsd.org/en/articles>





drhowarddrfine said:


> What link is that?



Good question. It's unfortunate that the banner does not show the title. 

<https://docs.freebsd.org/en/articles/gjournal-desktop/#further-reading>


----------



## eternal_noob (Dec 18, 2021)

That's easy. You need to add the `flex-direction: row-reverse` property to the <main> element.


See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items


----------



## grahamperrin@ (Dec 18, 2021)

Thanks,



eternal_noob said:


> … add the `flex-direction: row-reverse` property to the <main> element. …



Sorry, I'm lost.



grahamperrin said:


> For use with e.g. Stylus.



What should I type?


----------



## eternal_noob (Dec 18, 2021)

grahamperrin said:


> What should I type?


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:

```
.main-wrapper-article {
    flex-direction: row-reverse;
}
```

Edit: Looking at https://github.com/openstyles/stylus/wiki/Writing-UserCSS#more-examples, something like

```
@-moz-document domain("docs.freebsd.org") {
  main.main-wrapper-article {
    flex-direction: row-reverse !important;
  }
}
```
should work.


----------



## grahamperrin@ (Dec 18, 2021)

In Stylus:



Shared: <https://userstyles.world/style/2408/freebsd-documents-tables-of-contents-to-the-left>

A future version should have a broader scope, to modify things such as: 

☑ the book of answers to frequently asked questions
 ☐ …


----------



## grahamperrin@ (Dec 18, 2021)

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): 



For now, I can't be bothered to work around the exceptional pages. Let's wait until there's consistency of style with originals.


----------



## eternal_noob (Dec 18, 2021)

grahamperrin said:


> For now, I can't be bothered to work around the exceptional pages.


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.



To do so, remove the style for the <main> element and use this:

```
.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?


----------



## grahamperrin@ (Dec 19, 2021)

Planet icons for external links are so last century, dude …

FreeBSD bug 260535 – MoinMoin Wiki archaic use of globe/planet icons for external links

▶ planet-free wiki.freebsd.org — UserStyles.world

Before and after:


----------



## grahamperrin@ (Dec 19, 2021)

eternal_noob said:


> … TOC always to be to the left, regardless of its position in the source code. …



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:



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


----------



## grahamperrin@ (Jan 1, 2022)

A more exotic experiment (involving an extension). 


```
{
    visibility: hidden !important;
}
```

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


----------



## eternal_noob (Jan 1, 2022)

```
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.


----------



## eternal_noob (Jan 1, 2022)

I guess you stepped in the *visibility *vs* display* trap.
I've edited my post in order to elaborate.


----------



## Erichans (Jan 1, 2022)

eternal_noob said:


> [...] But in order to hide the TOC i'd rather use `display: none;`.


Exactly. That would be a good basis for a user activated display<->hide of either side TOC.


----------



## grahamperrin@ (Jan 1, 2022)

Fixed, thanks eternal_noob. I don't intend to share this this one at userstyles.world, it relates to <https://forums.freebsd.org/posts/548999> and thereabouts.


```
.main-wrapper-article .article-toc,
.main-wrapper-book .book-toc,
.main-wrapper-book .toc,
aside.book-menu,
aside.toc {
    display: none !important;
}
```


----------

