<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bootstrap (third party plugin)</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="../../style.css" type="text/css" /> <link rel="stylesheet" href="../../local.css" type="text/css" /> <meta name="author" content="anarcat" /> </head> <body> <div class="page"> <div class="pageheader"> <div class="header"> <span> <span class="parentlinks"> <a href="../../index.html">ikiwiki</a>/ <a href="../../plugins.html">plugins</a>/ <a href="../contrib.html">contrib</a>/ </span> <span class="title"> bootstrap (third party plugin) </span> </span> </div> </div> <div id="pagebody"> <div id="content" role="main"> <p><span class="infobox"> Plugin: bootstrap<br /> Author: <span class="createlink">anarcat</span><br /> Included in ikiwiki: no<br /> Enabled by default: no<br /> Included in <a href="../goodstuff.html">goodstuff</a>: no<br /> Currently enabled: no<br /> </span></p> <div class="infobox"> Available in a <a href="../../git.html">git</a> repository <a href="../../branches.html">branch</a>.<br /> Branch: anarcat/bootstrap-plugin<br /> Author: <span class="createlink">anarcat</span><br /> </div> <h2>Rationale</h2> <p>One of the most annoying features of bootstrap and/or the (informal) <span class="createlink">bootstrap theme</span> is the lack of styling on tables. It makes tables look horrible! Look, for example, as the table in <a href="https://web.archive.org/web/20180513200625/https://anarc.at/blog/2018-04-12-terminal-emulators-1/">this page</a>: 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.</p> <p>Bootstrap has a nice <a href="https://getbootstrap.com/docs/4.0/content/tables/">table</a> 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 <a href="../mdwn.html">mdwn</a> plugin) do not add that class to generated tables.</p> <h2>Solution</h2> <p>I found there are two ways of fixing that. One is to use raw HTML: the <a href="../htmlscrubber.html">htmlscrubber</a> plugin will let through <code>class</code> elements in tables so this will actually work:</p> <pre><code><table class="table"><tr><td>This<td>is<tr>a<tr>table!</table> </code></pre> <p>But of course, it would be nice if Markdown-formatted tables would actually render correctly as well. For this, I have written a <a href="https://gitlab.com/anarcat/ikiwiki/blob/bootstrap/IkiWiki/Plugin/bootstrap.pm">simple plugin</a> 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 <code><table></code> tag that already has other class elements, so it should be safe to use alongside other plugins that generate their own <code><table></code> markup, provided they <em>do</em> add some sort of <code>class</code>, <code>id</code> or other attribute. Unfortunately, the <a href="./bibtex.html">bibtex</a> plugin does not do that correctly and somewhat looks ugly with this plugin. Compare for example, <a href="https://web.archive.org/web/20170717065911/https://anarc.at/communication/">this old version</a> with <a href="https://web.archive.org/web/20180626203321/https://anarc.at/communication/">the new rendering</a>. I'm still unsure which one looks better, actually...</p> <h2>Discussion</h2> <p>Anyways, I wasn't quite sure where to put this, but it seems like an important improvement to make if we're going to <span class="createlink">merge bootstrap branch</span>. 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 <code>sanitize</code> 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 <em>all</em> <code><table></code> tags even if they had extra attributes, but I found I didn't want to add <code>class</code> 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.</p> <p>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 <a href="https://getbootstrap.com/docs/4.0/content/reboot/">content</a> section of the bootstrap docs says there are special classes for tags like <code>img</code>, <code>form</code>, <code>input</code> and <code>div</code> that might be interesting to look at... </p> <p>-- <span class="createlink">anarcat</span></p> </div> </div> <div id="footer" class="pagefooter" role="contentinfo"> <div id="pageinfo"> <div class="tags"> Tags: <a href="../../branches.html" rel="tag">branches</a> <a href="../../git.html" rel="tag">git</a> <a href="../type/chrome.html" rel="tag">type/chrome</a> </div> <div class="pagedate"> Last edited <span class="date">Tue Feb 26 23:01:54 2019</span> <!-- Created <span class="date">Tue Feb 26 23:01:54 2019</span> --> </div> </div> <!-- from ikiwiki --> </div> </div> </body> </html>
distrib
>
Mageia
>
7
>
armv7hl
>
media
>
core-release
>
by-pkgid
>
d8544620e4ac7bee48ddb48c85d55709
>
files
>
237
