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 Rendered

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.

Markup

CSS (with styles based on revision 103150 of Template:Char) .chargallery { display: flex; flex-wrap: wrap; justify-content: center; } .chargallery-theme-ua .chargallery-profile { background-color: #910000; border-color: #5f0000; } .chargallery-theme-ph .chargallery-profile { background-color: #d80000; border-color: #c40000; } .chargallery-theme-vl .chargallery-profile { background-color: #141414; border-color: #0d0d0d; } .chargallery-theme-pl .chargallery-profile { background-color: #0044b3; border-color: #0040a9; } .chargallery-theme-in .chargallery-profile { background-color: #2c8a2e; border-color: #29822b; } .chargallery-theme-kb .chargallery-profile { background-color: #8b8b00; border-color: #727200; } .chargallery-theme-sh .chargallery-profile { background-color: #00458b; border-color: #004081; } .chargallery-theme-vg .chargallery-profile { background-color: #778899; border-color: #696969; } .chargallery-theme-ih .chargallery-profile { background-color: #7c073f; border-color: #7c073f; } .chargallery-profile { border: 3px solid; margin: 0 -3px -3px 0; text-align: center; width: 135px; } .chargallery-profile img { height: 135px; width: 135px; } .chargallery-profile-caption { font: bold 1.1em/1.25em sans-serif; margin: .4em; } .chargallery-profile-subcaption { font: bold .8em/1.25em sans-serif; margin: -.4em .4em .4em; } .chargallery-profile-caption, .chargallery-profile-caption a, .chargallery-profile-subcaption { color: white; } Rendered

NB: Unless those styles have been included, the above demo will pretty plain. To inject those styles temporarily into this page, run the following JS in your browser's console.

(function{const x=document.createElement('style');x.appendChild(document.createTextNode('.chargallery{display:flex;flex-wrap:wrap;justify-content:center}.chargallery-theme-ua .chargallery-profile{background-color:#910000;border-color:#5f0000}.chargallery-theme-ph .chargallery-profile{background-color:#d80000;border-color:#c40000}.chargallery-theme-vl .chargallery-profile{background-color:#141414;border-color:#0d0d0d}.chargallery-theme-pl .chargallery-profile{background-color:#0044b3;border-color:#0040a9}.chargallery-theme-in .chargallery-profile{background-color:#2c8a2e;border-color:#29822b}.chargallery-theme-kb .chargallery-profile{background-color:#8b8b00;border-color:#727200}.chargallery-theme-sh .chargallery-profile{background-color:#00458b;border-color:#004081}.chargallery-theme-vg .chargallery-profile{background-color:#778899;border-color:#696969}.chargallery-theme-ih .chargallery-profile{background-color:#7c073f;border-color:#7c073f}.chargallery-profile{border:3px solid;margin:0 -3px -3px 0;text-align:center;width:135px}.chargallery-profile img{height:135px;width:135px}.chargallery-profile-caption{font:bold 1.1em/1.25em sans-serif;margin:0.4em}.chargallery-profile-subcaption{font:bold 0.8em/1.25em sans-serif;margin:-.4em 0.4em 0.4em}.chargallery-profile-caption,.chargallery-profile-caption a,.chargallery-profile-subcaption{color:white}'));document.head.appendChild(x)});