3 ms·
Horizontal rules are a fun element to play with. On my website, I wrote a Pandoc compile pass to count rules inside a document and number them modulo 3, so they
by gwern 6y ago
Horizontal rules are a fun element to play with. On my website, I wrote a Pandoc compile pass to count rules inside a document and number them modulo 3, so they cycle: stars / moon / sun https://www.gwern.net/Lorem#horizontal-rulers https://www.gwern.net/Lorem#horizontal-rulers Each ruler gets a class for being a 1th, 2th, or 3th ruler. (You can't do this in pure CSS easily because the rulers could be nested at any depth so the usual :nth counters don't work. You could do it in JS, of course, but I try to minimize use of that.)
Why? Because the icons are really nice-looking, especially in dark mode, compared to a boring line, and I felt the astronomical touch added some class, combined with the moons in the footer.
- rgovostes 6y agoThey don’t seem to work for me on iOS Safari.
- jfk13 6y agoNor on desktop (macOS) Safari.
- gwern 6y agoNot work in what sense? You see default rulers but not fancy SVG icons? You see no decoration at all? What? (HNers know how useless "it doesn't work" is as feedback when there are so many ways for something to not work, and when it obviously works fine for most people who use it and the developers responding to the feedback, or it would've been fixed already.)
- rgovostes 6y agoYes I suppose I could be more descriptive. No ruler appears at all. But since I do not know the root cause, you are going to have to get ahold of Safari to debug it anyway. https://i.imgur.com/2MBBo3c.png https://i.imgur.com/2MBBo3c.png
- gwern 6y agoAh. Turns out Obormot wasn't using Safari at all, which is why he hadn't noticed. I've never owned any Apple devices at all, so I can't test either. It turns out Safari (still, thanks Apple!) has poor flexbox support so the SVGs just vanish... We've fixed it, we think.
- lupire 6y agoDoes it work for you on Safari?
- _Microft 6y agoHmm, can't you use CSS counters that get incremented on every rule and apply a custom, cyclic counter-style to them that contains the symbols you would like? Counters work independently of the depth of the element in the tree. Edit: like that: (sorry in advance, mobile users) @counter-style rulestyle { symbols: "*" ")" "+"; /* Symbols go here, images work too. */ system: cyclic; } body { /* Initialize counter somewhere. */ counter-reset: rules; } hr { /* Style <hr/> as wanted. */ border: none; text-align: center; } hr:before { counter-increment: rules; content: counter(rules, rulestyle); } Edit 2: according to caniuse.com this seems to be only properly supported in Firefox so far.
- gwern 6y agoI don't know if we discussed it, but FF-only is a dealbreaker. Our usual criterion for breaking changes is supporting >95% of users according to CanIuse.
- _Microft 6y agoUnderstandable that this is a dealbreaker but I do not think we have ever directly interacted before, so you might have misremembered whatever discussion you had in mind.
- gwern 6y agoBy 'we' I mean me and Obormot when we were developing that feature, and to a lesser extent the Pandoc mailing list where I brought the question up as well.