2019-08-09 CSS adventures

I’ve been experimenting with moving stats from inline into a sidebar for Hex Describe. It hasn’t been going too well.

First, I moved them into separate aside elements. The regular expression from hell was easy enough to write. 😭

my $stats_regexp = qr{
    (?<name> <strong>[^<>]*</strong> | <em>[^<>]*</em> )
      [^<>]*            # random text without tags
      (?: <span \s+ class="images"><img[^>]+?></span>
      [^<>]* )*         # except for images followed by text
    (?: \s+ \( )        # whitespace and opening parenthesis
    (?<stats> HD        # beginning of actual stats
      [^()]+            # anything that's not a parenthesis
      (?: \( [^()]+ \)  # anything that's not a parenthesis, in parentheses
          [^()]*        # followed by anything that's not a parenthesis
      )*                # multiple times
    )                   # end of stats
    (?: \) )            # followed by a closing parenthesis

The core of the changes at the CSS level also didn’t take too long to discover. 😭

aside {
    position: absolute;
    width: 40ex;
    left: 90ex;
    display: block;
    float: right;

I didn’t know you could just not include top. I didn’t know you could use float to have the elements shuffle around a bit in order to get less overlap.

It was a bit trickier to reduce the font size because that also meant changing left.

aside p, aside table {
    /* font size smaller down here because we need the ex unit in the
       aside element */
    font-size: smaller;

Oh well.

And yet! And yet. Problems persist.

Apparently the regular expression doesn’t match all the stats. It doesn’t match the stats of the second white dragon in the example below. I guess that’s because highlighting the location name disrupts the regular expression.

Image 1

Sadly, there is still some rare overlap. Perhaps the idea that float would help avoid that was an illusion?

Image 2

Sometimes there is quite a lot of overlap!

Image 3

Unsurprisingly, repetitions are more glaring mistakes, now:

Image 4

Sometimes we have the monster type, the leader name, and something unrelated emphasized before stats. In this case, for example, the name of the clan is used to preface the stats in the margin. Not terrible, but also not perfect.

Image 5

Sometimes we have the monster type and the leader name before stats. In this case, it’s even weirder, because now the stats are prefaced by the leader name.

Image 6

Anyway, I’m not happy and I think I spent enough time investigating for me to give it a rest. I stored what I have in the aside branch and will revert back to what I had before. So long, sidebar with stats!



@kaushalmodi suggested I take a look at Tufte CSS. I had seen blogs that use it. Perhaps I simple “clear” instruction would have fixed those remaining overlap issues?

.marginnote {
    float: right;
    clear: right;
    margin-right: -60%;
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    vertical-align: baseline;
    position: relative; 

Some other day! Three hours is enough.

– Alex Schroeder 2019-08-09 13:26 UTC

@dredmorbius linked to their enumerated sidenotes codepen. And there are more examples on that site!


– Alex Schroeder 2019-08-09 13:35 UTC

Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. Note: in order to facilitate peer review and fight vandalism, we will store your IP number for a number of days. See Privacy Policy for more information. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.