Not Your Typical Horizontal Rules | Hacker News Reader

Not Your Typical Horizontal Rules

sarasoueidan.com

40 pointstodsacerdoti17 comments

This is a great exploration of how to use SVG on the web. It is a very under-utilized technology.

One thing that would add to this post is to point out that you can define an SVG once in a document and then reference it everywhere else. That way you aren't inlining the actual SVG markup over and over and over.

1. Place your SVG inline anywhere in the document. I usually put all of them in a `<div>` I do `display: none` on.

2. Make sure you assigned each SVG an ID: `<svg id="foobar"></svg>`

3. Reference that SVG anywhere in your document using `<svg><use xlink:href='#foobar'></svg>`

I use it extensively in a Github project (shameless plug) I've been working on lately. https://github.com/pseudosavant/player.html/blob/master/src/...

Edit: The author does link to her great post digging into the details of using `<use>`, but it didn't seem prominent enough that people would check it out. https://tympanus.net/codrops/2015/07/16/styling-svg-use-cont...

Nice tip, love to learn little things like this.

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 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.

They don’t seem to work for me on iOS Safari.

Nor on desktop (macOS) Safari.

Not 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.)

Yes 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

Ah. 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.

Does it work for you on Safari?

Hmm, 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.

I 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.

Understandable 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.

By '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.

I haven't tested it, but I think this would not work well with text-mode browsers (like lynx), as they likely would not recognise the role attribute. Possibly, for them, there should also be a concealed actual hr node.

The author is using SVG to style actual HR elements.

Keep (re-)reading to the end.

There are two main "its" in the article. One of them (SVG tag) might not work in old browsers that don't support modern standards.

"Text mode" isn't the issue, as screen readers are also "text mode".

Reply on news.ycombinator.com