A Leaner Tables Alternative for 4 Glyphs

I couldn’t get this table to center or display any of its style but that’s alright because I’m looking for an alternative — flex? grid? — whichever can produce these four typographer’s asterisks using the least amount of code is what I’m after. I’m going to have to reuse these fairly frequently. They’re centered in a 300px container using 75px each cell. Thank you and here’s the demo:

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<title>99 YIN YANG w&#47; Test &#7172;</title>

<style>

body {
      width: 950px;
      margin: 3.13rem;
      text-align: left; 
      font-family: 'roboto slab', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 600;
      color: black;
    }

table .yin {
    width: 300px;
    margin: 1.88rem 0rem 1.88rem 0_rem;
    text-align: center
    font-family: 'crete round', serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
}
td .yang {
    width: 75px;
    text-align: center;
    font-family: 'crete round', serif;
    font-size: 3.5rem;
    line-height: 3.5rem;
}

</style>
</head>

<body>

In the land of Khi, from village to village,<br>
You could hear cocks crowing, dogs barking.<br>
Fishermen cast their nets,<br>
Ploughmen ploughed the wide fields,<br>
Everything was neatly marked out<br>
By boundary lines. For five hundred square miles<br>

<table class="yin">
    <tr>
        <td class="yang">&#10034;</td>
        <td class="yang">&#10034;</td>
        <td class="yang">&#10034;</td>
        <td class="yang">&#10034;</td>
    </tr>
</table>

There were temples for ancestors, altars<br>
For field-gods and corn-spirits.<br>
Every canton, county, and district<br>
Was run according to the laws and statutes-<br>
Until one morning the Attorney General, Tien Khang Tzu,<br>
Did away with the King and took over the whole state.<br>
Was he content to steal the land? No,<br>
He also took over the laws and statutes at the same time,<br>
And all the lawyers with them, not to mention the police.<br>
They all formed part of the same package.<br>

</body>
</html>

Well, no they’re not, because your CSS is incorrect.

The extra space means your classes dont apply; table .yin is looking for an element UNDER the table element that has class yin. table.yin looks for a table element with the class yin.

div.yin {
    margin: 1.88rem 0rem 1.88rem 0_rem;
    font-family: 'crete round', serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    letter-spacing: 75px;
    padding-left: 37px;
}
<div class="yin">&#10034;&#10034;&#10034;&#10034;</div>

?
(Paul will probably be along shortly to do it better :wink: )

https://codepen.io/EtoileLion/pen/vYwEvBLAsterisks (codepen.io)

2 Likes

Though my brain has just cottoned on to the idea that i’m not accounting for character width in those spacing and padding numbers. So fiddle around with it; probably use some REM’s instead of PX’s and whatnot.

1 Like

Not better - just different :slight_smile: (and if I hadn’t already started on it I would have moved on :wink:

I like a structure so I can’t bare to see text not wrapped in paragraphs so I added the p tags and gave a wrapper to the page so that it could be centred more easily. I just spaced the asterisks out with flex which will do it automatically.

Note that the asterisk centre will be the centre of the widest line of text in your poem. I gave the poem a background so that you could see where things are.

2 Likes

Ah. Thank you m_hutley. Very interesting!

And more interesting! Yes I was attempting a stripped-down model for simplicity’s sake. lol. :tongue: Thank you Paul. This goes in my toolbox.

Can I ask one question Paul: Were it not for the fact that I’m putting the table on a diet . . . The “b” you’re using — could that have been “yang” / or was that any random letter you plucked out of the vocabulary / or does the b have proprietarial use in flex in this demo? Thanks Paul.

Would guess he used b because he needed an element to apply the flex attributes to, and b is a valid html element. He could have used a span to wrap each one instead - but the b is shorter to type, and doesn’t really have a semantic meaning, other than bold.

2 Likes

Deep. I didn’t want to bring up the instance of bold because, more often than not I don’t have a clue about what I’m talking about and would prefer a better mind such as yours Dave to state the obvious. Ingenious isn’t it? Into my toolbox this little gem of Tablecraft goes. “The ‘b’ Hack” Thanks Dave. :weee:

Say Dave — you don’t think it’s actually bolding those asterisks do you? I definitely do not want them bolded . . .

Yes it will make them bold because that’s basically what that tag is for. I just thought the bold effect look better and more obvious.

You can turn it off with font-weight:normal; like this.

.yin b {
  font-size: 3.5rem;
  line-height: 3.5rem;
  font-weight:normal;
}

However without the bold effect in place a span would be more semantically correct.

I chose the bold tag because it’s mostly semantically neutral but does indicate that something has drawn your attention such as the end of that verse.

2 Likes

This nearly centres the asterisks without <b> or <span>:

3 Likes

Archibald arrgh! You’re off by just 20px! That would have been sweet. It’s just the kind of thing I was looking for — light in both the CSS and the html (because I’m going to have to use it repeatedly with Merton’s translations). I also tend to go verbose on the body tag (I can follow it easier) so your shortcuts would’ve had to be ((expanded)). I’ve been coding little html projects now for over 30 years and am just now getting comfortable with stating margins in the shortcut format, if that’s any guide. :tongue:

I’ll stick with Paul’s which has that nice advantage of tracking the longest line for its centering.

Paul I didn’t want that bolded and — unfortunately — this particular typographer’s asterisk will bold if you instruct it to. Did you want to do the more semantically correct version or shall I just back out of it with font-weight: normal?

Yes, surprisingly CSS character-spacing adds space after the last character. You can correct for that by adding padding-left with a value equal to the character-spacing value.

1 Like

That’s brilliant Archibald. I just popped in to post this screenshot: I can’t use Paul’s method because the shape-outside is messing with the centering. I need something more durable. I’ll give your method a try. :weee:

Archibald I’m going over to my SVG thread. If your around I’d appreciate some help with the shape-outside element. Paul provided for two of these “scallops” but in the next poem I’m going to need three and I’m uncertain if I can just duplicate one of his styles and stick it in there . . . or if he’s created dependencies that lock them in.

The above is Paul’s. Archibald your scheme works perfectly and appears durable afaik (I just measured it). I’ll post the code over at my SVG thread where I need shape-outside help. This will be the full page — the background, the full poem and your asterisks.

Another approach is to use white-space: pre but it does not give you fine control over asterick spacing:

3 Likes

Archibald . . . I need to place top & bottom margins on this line of your code .yin

  margin: 0 auto;

— but I’m uncertain how to do it since you have ‘auto’ in there. Could you just show me an example? Something like

margin: 1.25rem 0rem 1.25rem 0rem;

I’m sorry but this takes precedence over whatever ‘auto’ was doing (centering? then we have to state it separately). I’m trying to fine tune the vertical spacing. Thanks.

margin: 0 auto; is setting top and bottom margins to 0 and setting left and right margins to auto Setting left and right margins to auto centres the element horizontally.

margin: 1.25rem 0rem 1.25rem 0rem; sets the top, right, bottom and left margins in that order. So you could use margin: 1.25rem auto 1.25rem auto and the element will be centred horizontally. As top and bottom margins are the same, that can be shortened to margin: 1.25rem auto;

However, in my CodePen, the <p> elements above and below have default 1em (not 1rem) top and bottom margins. The margins do not add because they “collapse”: see:

So you may wish to add CSS to control top and bottom margins of the <p> elements.

1 Like

I ended up going with

margin: 1.25rem auto 1.25rem auto;

and it seems to work. I haven’t tried validating it yet however so I hope it’s legit! Thank you Archibald.

As already mentioned that just needs to be:

margin: 1.25rem auto;

No need to be more verbose than that and the less code you have the less chance for mistakes. :slight_smile:

2 Likes

So is this like when I see you using #000 as a shortcut for black — it’s just duplicating the first half? Cool.