Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
hr markup
I’m a big fan of asterisms (⁂), which are a kind of copy divider in longform and narrative; useful for when you need a transition in copy but not a full chapter or subchapter break. A lot of others from what I see around the web like them too, though most people cop-out and use a dinkus (***) as an easier substitue.
The problem, though, is these are often marked up as paragraph when they are no such thing. Much closer to a hardrule, in fact, which seems to be the only HTML element to work from in this case that has any semantic relevance. There’s a good breakdown of the situation for LaTex, but that’s not helpful here.
So I’ve come up with this CSS:
hr.asterism {
width: auto;
height: 0;
background: none;
margin: 2em auto 3.5em auto;
text-align: center;
}
hr.asterism:before {
content: '\2042'; /* asterism unicode */
}And output it with a simple <hr class="asterism">.
(I’ve always wanted a Textile sig for hardrules: hr(asterism).)
The rule works great in Safari and FF, but doesn’t output the glyph in Vivaldi, though the margins do render as expected.
When inspecting the markup, it appears rendered as:
<hr class="asterism">
::before
</hr>Whereas the other browsers render it as expected:
<hr class="asterism">I don’t use Chrome, but Vivaldi is based on Chromium, sadly.
Is this what you would call a browser bug? I might report it if so.
Offline
Re: hr markup
Destry wrote #312779:
The rule works great in Safari and FF, but doesn’t output the glyph in Vivaldi, though the margins do render as expected.
It is a funky browser quirk with Chromium browsers (Which I did not know !).
The default browser style for the <hr /> element has this ( in Chromium browsers only):
hr { overflow: hidden; }which combined with your height: 0; rule hides the asterism.
When inspecting the markup, it appears rendered as:
<hr class="asterism">...Whereas the other browsers render it as expected:
<hr class="asterism">…
Safari and Firefox show the same structure in the inspector view.
<hr class="asterism">
::before
</hr>
~
You probably also want to hide the default border on the element. Revised code:
hr.asterism {
width: auto;
height: 0; /* Why ??? */
background: none;
margin: 2em 0 3.5em auto;
text-align: center;
/* add */
border: 0;
overflow: visible;
}
hr.asterism:before { content: '\2042'; /* asterism unicode */ }Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: hr markup
You rock, brother!
phiw13 wrote #312780:
Safari and Firefox show the same structure in the inspector view.
Maybe I was looking at source view instead of inspector view. Or high on peyote.
height: 0; /* Why ??? */
My reasoning was I didn’t want any line showing. Making it disappear seemed logical. But, you know, peyote.
?
Offline
Re: hr markup
Destry wrote #312781:
You rock, brother!
::blush::
(my decrepit body isn’t agreeing here though)
(…) peyote.
should I try that instead of the single malt ?
–~–
On a related note, Edge appears to have the same quirk with overflow: hidden, so there is that. That seems to contradict the default HTML styling, though.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: hr markup
phiw13 wrote #312783:
should I try that instead of the single malt ?
Best to remain in the 21st Century.
…. texted postive
Offline
Pages: 1