commodorian.org - 2025-04-09

Recently for Tails Gets Trolled I was super bored and wanted to change some stuff, to try to make the site look a bit more funky. A change from using several different fonts to one had the affect of making the site look quite samey. So, to achieve this, I changed how we format the FAQ on the About page. Instead of using plain HTML elements to render our questions, like so:

<p class="maintext"><b><u>Q: Question</u></b><br>
A: Answer</p>

I changed it to use specific elements:

<question>Question</question>
<answer>Answer</answer>

So, how does this work? If you go to the website, you'll see things render like this:

<question>Question</question> <answer>Answer</answer>

Simple answer to this question, CSS funkiness and hackery. Dark, arcane wizardry that I barely understand myself. To start, I wanted to talk about some problems about this design. First, it's very non-CSS hostile, which I will fix in the future but humor me on my CSS high please. Another problem is the fact that if you wish to use child elements in your question or answer blocks, like for example adding emphasis or adding a link you'll have some problems. With that out of the way, let's figure out why these problems occur.

If you poke about the CSS I've used, here's what the relevant parts of the <question> element look like:

question::before {
   content: "Q: ";
}
question {
   display: grid;
   grid-template-columns: 1.5lh auto;
}

Aha, if you know anything about how CSS Grid works then you'll spot the problem. For those unfamiliar, when you set an element to have a display of grid, you turn all direct children into grid items. This includes any text content, so if you purely have text content in <question>, it renders fine. If you have extra content in your text, like emphasis, this emphasis element will be another grid item. Any text after your emphasis will also be another grid item. This makes your emphasis show up under Q:, which looks awful. How do I get around this? <span>. Very boring, I know, but it works. Here's an example:

<question><span>Hey, what's <i>X</i> doing there?</span><question>
<answer>I dunno bro. Ask Lazerbot.</answer>

This makes the only direct children of <question> be ::before and <span>, therefore keeping the flow of content where we want it.

I will probably be changing how this works in the future, because it's not very friendly to browsers without CSS. My rough idea is to forgo ::before and include a proper element for the Q: and A: parts. Something like this:

<?php question('Question'); ?>
<?php answer('Answer'); ?>

Which will render to:

<table class="qna">
   <tr>
      <td class="label">Q:</td>
      <td class="content">Question</td>
   </tr>
</table>
<table class="qna">
   <tr>
      <td class="label">A:</td>
      <td class="content">Answer</td>
   </tr>
</table>

I hate to use a <table> element but I can't think of any other way to get it to render how I want in a non-CSS browser. I'm sure it's still gonna stink like ass anyway. Relevant CSS:

table.qna > tr {
   /* By the way, use this CSS nesting stuff, makes code *way* cleaner */
   & > td.label {
      width: 1.5lh;
   }
}

So, yeah, something like that. I hate <table> so much.

Cool CSS Stuff for TGT