0

I'm utilizing the Bravura music font.

Here's its font-face definition:

<font-face 
    font-family="Bravura"
    font-weight="400"
    font-stretch="normal"
    units-per-em="2048"
    panose-1="5 6 0 0 0 0 0 0 0 0"
    ascent="1638"
    descent="-410"
    bbox="-889 -4080 4749 4120"
    underline-thickness="102"
    underline-position="-102"
    unicode-range="U+0020-1D1DD"
  />

I'm trying to wrap my head around font metrics. I've studied the explanation on this site: But I'm still unclear.

My goal is to translate the glyphs into a properly scaled SVG path using an SVG symbol viewBox attribute.

So the EM square (which is an imaginary square enclosing each glyph) is 2048x2048 units (defined by units-per-em). A unit is 1/72 of an inch. My monitor DPI is 96x96

Converting this to pixels = 2048 * 96/72 = 2730 1/3 x 2730 1/3

(Let me know if I'm off here)

So each font should natively fit into a 2730 1/3 x 2730 1/3 square?

How does the bounding box #s fit into this process? Are the bbox units in glyph-units as well? (1/72 in)

Should the bbox value below be directly inputted into the viewBox attribute of a symbol?

Do I need to consider ascent and descent values?

Here is a jsfiddle somewhat demonstrating my issue: http://jsfiddle.net/1wqa384u/5/

Any resources or help appreciated.

Vigrond
  • 8,148
  • 4
  • 28
  • 46

1 Answers1

1

The em box encompasses the ascent and decent. Notice that ascent-descent=2048.

As for your main question, I think you are confusing yourself a bit. The viewBox tells the browser how to scale the symbol to fit the size specified by the <use> that references it.

So if I understand what you want correctly, your symbol viewBox should just be "0 0 2048 2048".

You should then be able to draw it at, say 12pt, by referencing it like so:

<use xlink:href="#mysymbol" x="100" y="100" width="12pt" height="12pt"/>

You shouldn't have to worry about doing your own DPI conversion.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Ahh this helps a lot. Almost there. Using a viewBox of 0 0 2048 2048 cuts the top half of it off. I'll see if I can do a jsfiddle for you. Give me a moment, thanks! – Vigrond Aug 10 '14 at 10:27
  • Yes sorry. I made a mistake. The viewBox will actually be something more like `" (-) "`. Depending on what transform you use to correct the Y coordinate inversion. Your clef symbol definitely goes outside of the 2048 though. It's viewBox seems to be something like `"0 -2255 2605 3605"`. – Paul LeBeau Aug 10 '14 at 19:49
  • I should have mentioned there is a `horiz-adv-x='1024'` So after some fiddling + your advice - the viewbox formula seems to be: 0 (0 - em - descent) (em + horiz-adv) em – Vigrond Aug 10 '14 at 20:47
  • This also implies the width/height ratio should be `.75`. Also `preserveAspectRatio="xMinYMin"` is needed. Here is an updated example: http://jsfiddle.net/1wqa384u/8/ Let me know if this seems right and I'll mark you answer : ) – Vigrond Aug 10 '14 at 20:55
  • If your `` width and height has the same aspect ratio as the symbol viewBox, then the `preservAspectRatio` value shouldn't matter. However you seem to have a wide viewBox and a narrow use width. – Paul LeBeau Aug 11 '14 at 08:42
  • Hmm. With `preserveAspectRatio` set to `none`, the only way I could get this to display properly is by doubling the max x / max y and ensuring the aspect ratio was 1:1 - http://jsfiddle.net/1wqa384u/9/ I feel like I'm just shooting guesses out here now. I need to figure out a way to understand the conversion process here. – Vigrond Aug 11 '14 at 09:31
  • So the font-face definition you provided in your question is the one for the font that the clef is from? If so, then the issues you/we are having are because the clef glyph extends outside the em box. So you will get issues with clipping when you try to scale based on a viewBox derived from the em box. What you should just do then is use a viewBox of "0 0 2048 2048" and in your `` set width and height to 80pt. Finally set your `` to have `overflow="visible"`. See http://jsfiddle.net/1wqa384u/11/ And just do the same thing for all your glyphs. – Paul LeBeau Aug 11 '14 at 10:07
  • Yes exactly. Oh wow, this totally makes sense now. I wasn't aware of the overflow attribute, thanks for pointing it out. But now that I think about it - the "G Clef" as this symbol is called - is suppose to be horizontally aligned exactly where your two red dots are (the baseline). Given that, it appears obvious that this font was meant to have overflow. I think this points me in the exact direction I need to go. Perhaps I'll contact the font creator to try to extract more info. Thanks for your patience and help `BigBadaboom`, much appreciated! – Vigrond Aug 11 '14 at 11:28