Align headers of content-tabs in pdf

[alkisg]

In this page, I authored my first content tab: https://ltsp.org/docs/ppa/
Then I used mkdocs-with-pdf to create: https://ltsp.org/ltsp.pdf
In that pdf, the following output appears:

Ubuntu Debian

add-apt-repository ppa:ltsp
apt update

wget https://ltsp.org/misc/ltsp-ubuntu-ppa-focal.list -O /etc/apt/sources.list.d/ltsp-ubuntu-ppa-focal.list
wget https://ltsp.org/misc/ltsp_ubuntu_ppa.gpg -O /etc/apt/trusted.gpg.d/ltsp_ubuntu_ppa.gpg
apt update

Note that normally Debian users should not be using PPAs. LTSP is an exception, as it only contains shell code (and a bit of
python), it is interpreted (Architecture:all, no compiled binaries involved), and the .debs are tested on Debian too.

What I don't like in that output is that "Debian" is displayed at the same line as "Ubuntu", while it should be later, between the two shell blocks. Is that possible?

[squidfunk]

This is a limitation of mkdocs-with-pdf, which you should raise to the authors. When you print a Material for MkDocs site from the browser, the tabs are correctly positioned, e.g. on the creating your site guide:

[alkisg]

Thank you. Indeed the headers are correctly positioned in print preview on e.g. Firefox.
But if you click the Firefox reader view, it suffers from the same issue:

Also, the "edit page" icon is incredibly huge (450px) in the Firefox reader mode.

[squidfunk]

Unfortunately, reader preview is unfixable, because the tabs implementation relies on CSS for positioning and there's no distinct media type that allows us to detect whether we're in reader mode or not, similar to what we use for print. If we could somehow detect it via media type, fixing tabs order is trivial, but I don't know of any media type or query that triggers.

[squidfunk]

I've just tested – it works with the old tabs implementation, which itself suffers from many more issues. Note that the old implementation is deprecated and is very likely to be removed in the next major version:

markdown_extensions:
  - pymdownx.tabbed:
      alternate_style: false # true is recommended

[alkisg]

Got it, thank you.

Would it be possible to add some limit like max-width: 3em to the SVGs used for edit/pip/docker/git icons, so that they're not 100% width when in reader view?

E.g. https://squidfunk.github.io/mkdocs-material/creating-your-site/ => reader view => scroll down a bit.

[squidfunk]

That will not work, because as I understand reader mode pretty much uses its own CSS. What you'd need to do is add dedicated widths to all icons, but that might be entirely incompatible with how we use icons in Material for MkDocs.

[squidfunk]

Also, note that reader mode is nothing we're optimizing for. It is a feature that only very few people use. If we'd optimize for reader mode, we'd loose a lot of other useful stuff on the way.

[alkisg]

Of course, we shouldn't break one thing to fix another; only if it's a win-win it should be implemented.