User:Puxlit/Experiments/BetterCharTemplate

The goal is to replace the existing Template:Char used by gallery templates (transcluded on pages like the List of Characters) with something that requires less manual control over presentation. Currently, we have to manually pack characters into rows and ensure caption heights on each row are (hopefully) consistent across browsers.

Here's an example of such shenanigans.

Markup

We could accomplish effectively the same design if we switched from nested tables to flex boxes. As an added bonus, these galleries would become responsive.

HTML  Short Name  Unreasonably Long Name  Short Name  Short Name  Short Name  Short Name  Short Name  Short Name CSS .chars { display: flex; flex-wrap: wrap; justify-content: center; } .char { background-color: #910000; width: 135px; } .caption { color: #fff; font: bold 1em sans-serif; margin: 0 0 .3em; text-align: center; }

TODO: Rewrite the template.