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> )
(?<text>
[^<>]* # 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
}x;
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.
Sadly, there is still some rare overlap. Perhaps the idea that `float` would help avoid that was an illusion?
Sometimes there is quite a lot of overlap!
Unsurprisingly, repetitions are more glaring mistakes, now:
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.
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.
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!
#CSS
(Please contact me if you want to remove your comment.)
⁂
@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?
.sidenote,
.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!
Nice!
– Alex Schroeder 2019-08-09 13:35 UTC