Plugin: bootstrap
Author: anarcat
Included in ikiwiki: no
Enabled by default: no
Included in goodstuff: no
Currently enabled: no
Rationale
One of the most annoying features of bootstrap and/or the (informal) bootstrap theme is the lack of styling on tables. It makes tables look horrible! Look, for example, as the table in this page: 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 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 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
htmlscrubber plugin will let through class
elements in
tables so this will actually work:
<table class="table"><tr><td>This<td>is<tr>a<tr>table!</table>
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 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 <table>
tag that already has other class elements, so
it should be safe to use alongside other plugins that generate their
own <table>
markup, provided they do add some sort of class
,
id
or other attribute. Unfortunately, the bibtex
plugin does not do that correctly and somewhat looks ugly with this
plugin. Compare for example, this old version with the new
rendering. 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
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 <table>
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 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