From: anarcat Date: Tue, 26 Jun 2018 20:46:04 +0000 (-0400) Subject: add a way to fix tables for bootstrap themes X-Git-Tag: 3.20190207~139 X-Git-Url: http://git.vanrenterghem.biz/git.ikiwiki.info.git/commitdiff_plain/3bae786e84ef4f4236b5d9f6db12809b241c65a9 add a way to fix tables for bootstrap themes --- diff --git a/doc/plugins/contrib/bootstrap.mdwn b/doc/plugins/contrib/bootstrap.mdwn new file mode 100644 index 000000000..9ed0af593 --- /dev/null +++ b/doc/plugins/contrib/bootstrap.mdwn @@ -0,0 +1,65 @@ +[[!meta author="anarcat"]] +[[!template id=plugin name=bootstrap author="[[anarcat]]"]] +[[!tag type/chrome]] +[[!template id=gitbranch branch=anarcat/bootstrap author="[[anarcat]]"]] + +## Rationale + +One of the most annoying features of bootstrap and/or the (informal) +[[bootstrap theme|todo/merge_bootstrap_branch/]] is the lack of styling on tables. It makes +tables look horrible! Look, for example, as the table in [this +page](https://web.archive.org/web/20180513200625/https://anarc.at/blog/2018-04-12-terminal-emulators-1/): margins are tiny so everything is jumbled up together, and +there are very little visual markers to differenciate between cells. I +don't have a better example handy, but this is particularly bad when a +cell ends up having long lines of text that are wrapped with multiple +lines. + +Bootstrap has a nice [table](https://getbootstrap.com/docs/4.0/content/tables/) style that is not automatically +applied to all tables, probably to avoid breaking table-based layout +and other custom controls like calendars a random site might spew +out. Unfortunately, the various Ikiwiki output plugins (most notably +the [[plugins/mdwn]] plugin) do not add that class to generated +tables. + +## Solution + +I found there are two ways of fixing that. One is to use raw HTML: the +[[plugins/htmlscrubber]] plugin will let through `class` elements in +tables so this will actually work: + + atable!
Thisis
+ +But of course, it would be nice if Markdown-formatted tables would +actually render correctly as well. For this, I have written a [simple +plugin](https://gitlab.com/anarcat/ikiwiki/blob/bootstrap/IkiWiki/Plugin/bootstrap.pm) that adds that class to empty table tags. It's very dumb, but +it should generally work, or at least it works for my case. It will +not touch any `` tag that already has other class elements, so +it should be safe to use alongside other plugins that generate their +own `
` markup, provided they *do* add some sort of `class`, +`id` or other attribute. Unfortunately, the [[plugins/contrib/bibtex]] +plugin does not do that correctly and somewhat looks ugly with this +plugin. Compare for example, [this old version](https://web.archive.org/web/20170717065911/https://anarc.at/communication/) with [the new +rendering](https://web.archive.org/web/20180626203321/https://anarc.at/communication/). I'm still unsure which one looks better, actually... + +## Discussion + +Anyways, I wasn't quite sure where to put this, but it seems like an +important improvement to make if we're going to +[[todo/merge_bootstrap_branch]]. I am not sure of the implementation +at all: the best way I found to edit only the rendered content (and +not the whole HTML page with the template) is to use the `sanitize` +hook, but I'm not sure it's the right way to go. It certainly seems +backwards to introduce new markup in a "sanitization" +procedure. Furthermore, I first tried to change *all* `
` tags +even if they had extra attributes, but I found I didn't want to add +`class` attributes to elements that already had some, soand that ended +up making the regex work way too messy, so I stuck to the simpler +way. + +Furthermore, there might be other markup elements we want to improve +upon. This only fixes tables, but maybe other elements would benefit +from additionnal styling. The [content](https://getbootstrap.com/docs/4.0/content/reboot/) section of the bootstrap +docs says there are special classes for tags like `img`, `form`, +`input` and `div` that might be interesting to look at... + +-- [[anarcat]]