HarryT's post (second in the topic) made me think of perhaps using a 3x3 table (with the center middle column merged to hold the large roman numeral). Mid-left and Mid-right having some sort of line inside.
The code failed miserably, so I didn't post about it (although I must admit, my table CSS skills are complete crap, so I was most likely doing something wrong with padding/margins/other magic).
It would have broken in just too many cases for my tastes (although it looked pretty good in Sigil).
Side Note: Actually, I just thought about it. Maybe the mid-left and mid-right can be filled with a background color? Maybe While top/bottom left/right can be to be 1.45em (1.45+1.45=2.9), the center middle can be 3em's large.
Maybe something along these lines:
Code:
<table>
<tr><td class="top"/><td class="romannumeral" rowspan="3">VIII</td><td class="top"/></tr>
<tr><td class="fillback"/><td class="fillback"/></tr>
<tr><td class="bottom"/><td class="bottom"/></tr>
</table>
Code:
table {
width: 100%;
}
td.romannumeral {
font-size: 3em;
text-align: center;
vertical-align: middle;
width: 30%;
}
td.top, td.bottom {
height: 1.45em;
width: 35%;
}
td.fillback {
background-color: gray;
}
Maybe more thoughts on how to tackle this will flow to me after nap time.
