html - How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts? -

a webpage i'm working on uses fancy chevrons bullet points in list. i'd define list style scales font size of list items itself: doing ultimate end goal of problem here.

we keep chevrons in svg files (one of offered below) can magnified without looking terrible. they're referenced this:

ul.foo {     list-style-image: url("../images/chevron.svg"); } 

we use these chevron lists few times each around site. they're large text, smaller or normal sized text. we're forced create new chevron image each font size (e.g. chevron-small.svg, chevron-medium.svg, chevron-large.svg, etc), surely there's better way lets use 1 image , have scaled , down on own based on font size!

however, haven't figured out how make image scale font size yet.

the w3 wiki list-style-image suggests "if image's intrinsic width or height given percentage, percentage resolved against 1em", sounds it's want. haven't worked out how make happen though. brian campbell's answer how can make svg scale parent container? appears suggest way make percentage thing happen, when set width or height of 100%, chevron bullet points show extremely tiny or not @ all, when font size large.

how can make list-style-image scale text size, ul's text size gets larger, bullet image too?

(glyph fonts: can't use them. they'd job done visually, have bad impact on accessibility because screen readers won't read out bullets bullets other weird character. define custom glyph font, possibly, , replace bullet characters in ours, file size overhead in doing excessive. far can tell, need use image.)

my svg's code

the svg comes illustrator , has code:

<?xml version="1.0" encoding="utf-8"?> <!-- generator: adobe illustrator 15.1.0, svg export plug-in . svg version: 6.00 build 0)  --> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"      width="8px" height="14px" viewbox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve"> <path fill="#666666" d="m0.37,12.638l5.726-5.565l0.531,1.347c0.252,1.059,0.261,0.601,0.547,0.321     c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244     c7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205     c-0.187-0.006-0.372-0.078-0.511-0.221c0.076,13.376,0.083,12.919,0.37,12.638"/> </svg> 

which shows following, text 16px, , chevron isn't scaling font size, decently large , visible (a bit larger desired in case, let's ignore that, since image can edited):

as stated, tried follow brian campbell's answer , set width or height property 100%:

<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"      width="100%" viewbox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve"> 

however, having either width or height defined 100% seems make chevrons tiny, , smaller 1em, stated:

(screenshot firefox. in chrome they're little bit bigger, still far smaller 16px.)

code snippet

/*   image referenced here svg provided above, base 64 encoding.  freshly exported version still has defined width , height of 8px , 14px.  may wish save svg above locally.  */    ul {    list-style-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz48iurpq1rzueugc3znifbvqkxjqyails8vvzndly9eveqgu1zhideums8vru4iicjodhrwoi8vd3d3lnczlm9yzy9hcmfwagljcy9tvkcvms4xl0rurc9zdmcxms5kdgqipjxzdmcgdmvyc2lvbj0ims4xiibpzd0itgf5zxjfmsigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3zniib4bwxuczp4bgluaz0iahr0cdovl3d3dy53my5vcmcvmtk5os94bgluayiged0imhb4iib5psiwchgiihdpzhropsi4chgiighlawdodd0imtrwecigdmlld0jved0imcawidggmtqiigvuywjszs1iywnrz3jvdw5kpsjuzxcgmcawidggmtqiihhtbdpzcgfjzt0ichjlc2vydmuipjxwyxroigzpbgw9iim2njy2njyiigq9ik0wljm3ldeyljyzogw1ljcyni01lju2nuwwljuzmswxljm0n0mwlji1miwxlja1oswwlji2mswwljywmswwlju0nywwljmymwmwlji4os0wlji3oswwljc0ni0wlji3miwxljayniwwljaxnmw2lja2miw2lji0yzasmc4wmdismc4wmdysmc4wmdqsmc4wmdgsmc4wmdzjmc4wnjgsmc4wnywwljexoswwlje1niwwlje1niwwlji0nem3ljkwmiw3lja4ocw3ljg0niw3ljm5osw3ljyzmsw3ljyxyy0wljawmiwwljawnc0wljawniwwljawnc0wljaxldaumda2bc02ljizocw2lja2m2mtmc4xndmsmc4xndetmc4zmzesmc4ymdktmc41mtqsmc4ymdvjltaumtg3ltaumda2ltaumzcyltaumdc4ltauntexltaumjixqzaumdc2ldezljm3niwwlja4mywxmi45mtksmc4znywxmi42mzgilz48l3n2zz4=');    /* or if wish save svg locally:    list-style-image: url('chevron.svg');    */  }    .small-list {     font-size: 85%;  }    .large-list {    font-size: 150%;  }

<ul class="small-list">    <li>the goal make chevron smaller list</li>    <li>specifically, smaller capital letters, stated.</li>    <li>nomas matas</li>    <li>roris dedit</li>  </ul>    <ul class="large-list">    <li>and larger list</li>    <li>nomas matas</li>    <li>roris dedit</li>  </ul>

i approach solving problem using pseudo element before each li

here markup

ul {      list-style: none;  }    li {      position: relative;  }    li:before {      /*      desired width gets defined in 2 places: element width, , background size.      height gets defined once, in background size.      */      position: absolute;      display: block;      content: '\2022'; /* bullet point, screen readers */      text-indent: -999999px; /* move bullet point out of sight */      left: -.75em;      width: .4em; /* desired width of image */      height: 1em; /* unrelated image height; gets snipped */      background-repeat: no-repeat;      background-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz48iurpq1rzueugc3znifbvqkxjqyails8vvzndly9eveqgu1zhideums8vru4iicjodhrwoi8vd3d3lnczlm9yzy9hcmfwagljcy9tvkcvms4xl0rurc9zdmcxms5kdgqipjxzdmcgdmvyc2lvbj0ims4xiibpzd0itgf5zxjfmsigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3zniib4bwxuczp4bgluaz0iahr0cdovl3d3dy53my5vcmcvmtk5os94bgluayiged0imhb4iib5psiwchgiihdpzhropsi4chgiighlawdodd0imtrwecigdmlld0jved0imcawidggmtqiigvuywjszs1iywnrz3jvdw5kpsjuzxcgmcawidggmtqiihhtbdpzcgfjzt0ichjlc2vydmuipjxwyxroigzpbgw9iim2njy2njyiigq9ik0wljm3ldeyljyzogw1ljcyni01lju2nuwwljuzmswxljm0n0mwlji1miwxlja1oswwlji2mswwljywmswwlju0nywwljmymwmwlji4os0wlji3oswwljc0ni0wlji3miwxljayniwwljaxnmw2lja2miw2lji0yzasmc4wmdismc4wmdysmc4wmdqsmc4wmdgsmc4wmdzjmc4wnjgsmc4wnywwljexoswwlje1niwwlje1niwwlji0nem3ljkwmiw3lja4ocw3ljg0niw3ljm5osw3ljyzmsw3ljyxyy0wljawmiwwljawnc0wljawniwwljawnc0wljaxldaumda2bc02ljizocw2lja2m2mtmc4xndmsmc4xndetmc4zmzesmc4ymdktmc41mtqsmc4ymdvjltaumtg3ltaumda2ltaumzcyltaumdc4ltauntexltaumjixqzaumdc2ldezljm3niwwlja4mywxmi45mtksmc4znywxmi42mzgilz48l3n2zz4=');      background-size: .4em .7em;      background-position: 0 .3em;  }    .small-list {      font-size: 85%;  }    .large-list {      font-size: 150%;  }

<ul class="small-list">    <li>the goal make chevron smaller list</li>    <li>specifically, smaller capital letters, stated.</li>    <li>nomas matas</li>    <li>roris dedit</li>  </ul>        <ul class="large-list">    <li>and larger list</li>    <li>multiline list item<br>for testing</li>    <li>nomas matas</li>    <li>roris dedit</li>  </ul>

explanation:

• first rid of default bullets on ul
• then create pseudo element in front of each li using :before selector , content: '\2022';
  • the content: '\2022'; adds unicode bullet point, •, screen readers read out. text indent moves out of sight.
• we apply background (chevron) pseudo elements, , size using few properties. key part here ensure dimensions maintain same ratio svg. dimensions on pseudo element defined using em adjust proportionally when font-size changed. finally, position background bullet have been.
  • background-size: .4em .7em; tells browser size background way image should sized, need maintain correct aspect ratio here.
  • background-position: 0 .3em; moves chevron image in line text.
  • width: .4em; makes psuedo element wide enough fit image, , height: 1em; makes match line height, , tall enough fit offset well.

caveat: - ie 8 doesn't support background-size, presume not issue doesn't support rendering svg.