[HN Gopher] Not Your Typical Horizontal Rules
       ___________________________________________________________________
        
       Not Your Typical Horizontal Rules
        
       Author : todsacerdoti
       Score  : 29 points
       Date   : 2021-04-06 09:34 UTC (1 days ago)
        
 (HTM) web link (www.sarasoueidan.com)
 (TXT) w3m dump (www.sarasoueidan.com)
        
       | pseudosavant wrote:
       | 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 markup --></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...
        
         | wavefunction wrote:
         | Nice tip, love to learn little things like this.
        
       | gwern wrote:
       | 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.
        
         | _Microft wrote:
         | 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.
        
         | rgovostes wrote:
         | They don't seem to work for me on iOS Safari.
        
           | jfk13 wrote:
           | Nor on desktop (macOS) Safari.
        
       ___________________________________________________________________
       (page generated 2021-04-07 23:01 UTC)