RE: measuring glyphs with script -- can it be done?

I understand if this is not a topic foremost on most people's minds, but one
more postscript on the subject:

 

Since Opera is the only modern browser that even seems to have a ghost of a
chance of doing top aligned text I did try this specifically for that
browser:

 

http://granite.sru.edu/~ddailey/svg/tspanmeasure4.svg

 

you will note, though, the rather inelegant solution:

 

for (var i=0;i<Lets.length;i++){ //Lets is a collection of <tspan>s each
containing one glyph

                                var TS=Lets.item(i)

                                var c=TS.firstChild.nodeValue

                                var B=TS.getExtentOfChar(0)

                                TS.setAttribute("y",( 32 + B.height -
5*B.y/3)  )

                                TS.setAttribute("font-size",( 31 +
4*B.height/3)  )

                                last=B.height 

                                lasty=B.y

                } 

 

Nudging the long glyphs up a bit less than the short ones, and nudging the
ones that dangle down with descenders even a bit more sort of works with
some rather inelegant formulae that are guaranteed not to work in other
browsers, not to work with other typefaces, not to work with other screen
resolutions? And so forth.

 

But, with a series of 18 thousand browser and font sniffs and hand-tailored
adjustments for each scenario, one can imagine accomplishing top alignment
of text (such as is found in a surprising number of locales, provided you
start looking for it!)

 

D

From: www-svg-request@w3.org [mailto:www-svg-request@w3.org] On Behalf Of
David Dailey
Sent: Sunday, May 29, 2011 6:11 PM
To: 'David Dailey'; 'www-svg'
Subject: RE: measuring glyphs with script -- can it be done?

 

BTW, I found this discussion dating from 2005:

http://lists.w3.org/Archives/Public/www-svg/2005Jun/0075.html 

 

It doesn't seem to help, and perhaps hints that the problem is indeed
unsolved within SVG, unless someone knows of progress on this front.

 

cheers

David

 

From: www-svg-request@w3.org [mailto:www-svg-request@w3.org] On Behalf Of
David Dailey
Sent: Sunday, May 29, 2011 3:09 PM
To: 'www-svg'
Subject: measuring glyphs with script -- can it be done?

 

I've been fussing with this problem for some time now and am beginning to
think the spec is broken in addition to all the browsers.

 

Perhaps someone can show me a different approach? An additional approach? 

 

To give an idea of the problem take a look at this picture

http://srufaculty.sru.edu/david.dailey/svg/TopAlignBrowsers.png

of how five browsers handle the file at

http://granite.sru.edu/~ddailey/svg/tspanmeasure.svg 

 

For an explanation of what is going on see here:

http://granite.sru.edu/~ddailey/svg/tspanmeasure3.svg 

 

I have manually positioned the glyphs of the word "trampoline" so that the
tops of the glyphs all align at the red line above. This is a standard
typographic effect used in numerous logos, shop signs, advertisements, album
covers, etc.

 

All browsers seem to manage this manual use of a comma-delimited set of
y-values on a text tag: y="128,120,120,120,120,120,128,127,120,127,120,120",
though in this case I also added a bit of stretching: textLength="605"
lengthAdjust="spacingAndGlyphs". SBUG means suspected bug; with all the bugs
found here, I suspect it will be 2017 by the time I have figured out how to
and actually gotten around to filing all the bug reports in all these
different browsers. I'm more concerned with how to do what I want to rather
than where I can do it.

 

Results of stretching:

IE9 and Opera behave as I think they should,

SBUG: FF seems to stretch the glyphs but not the spacing and not just
horizontally, and not the right amount 

SBUG: Safari stretches the spacing but not the glyphs

SBUG: Sarari doesn't antialias the text

SBUG: Chrome - oh my - this is just awful!

 

Okay , next, let's see what it looks like to apply some text-decoration
using script:

 

                Opera, Safari and Chrome seem to allow the application of
Q.setAttributeNS(null,"text-decoration","overline")

                SBUG: E9 and Firefox seem to think this attribute is not
settable (if it isn't settable then the spec must have a bug)

 

However:

                SBUG: Opera, Chrome and Safari leave the overline a fixed
distance over the text, rather than being a straight overline. Isn't
IE/ASV's behavior in
http://srufaculty.sru.edu/david.dailey/svg/TopAlignBrowsers.png

 how it ought to be?

                SBUG: Chrome and Safari make the overline strokes cover only
the extent of the glyph underneath, hence resulting in a series of line
segments rather than one overline. Both IE9 and Opera make continuous lines
if the effect is applied manually and without differential y values for the
glyphs.

 

Next, let's rebuild the string "trampoline" as a series of <tspan>s in hopes
that we might be able to measure the glyphs if they are not all inside the
same <text> (which, by the way, doesn't seem to work so well, if you push
the "make boxes" button before the "retype" button.)

Push the "Retype" button.

                Opera does it the way I would like (and as I recall IE/ASV
does too)

                SBUG: IE9, FF, Safar and Chrome all seem to miss the
textLength="605" lengthAdjust="spacingAndGlyphs" attributes on the
dynamically filled text tag (It should be the same as the text below it)

                SBUG: Chrome and Firefox seem to miss the
text-decoration="overline" attributes on the dynamically filled text tag.

 

 

Now let's see if we can actually create the desired effect: text aligned so
that the tops of all glyphs are aligned at their tops. Push the "Top
justify" button. This uses the getExtentOfChar() method which is supposed to
give us something like a bounding box around the glyphs. I tried getBBox,
but some browsers complained that I wasn't suppose to. 

                SBUG: (spec) why doesn't the spec allow us to draw a
bounding box around glyphs? Wouldn't it make sense, from an author's
perspective to allow this?

                SBUG: Opera which comes closest (along with IE/ASV) top
aligns all characters except for the "p" and the "g" both of which have
descenders that extend below the baseline. Is there any way to adjust for
this??

                SBUG: Firefox, IE9, Safari and Chrome all seem to move the
text different amounts upward or downward, but all glyphs move the same
amount!

                SBUG: all these browsers seem to have different ideas about
how far the text as a whole should be moved.

 

Let's try drawing boxes (IE/ASV sort of does what I want) here

                SBUG: Opera draws all its boxes over in some private little
space at the upper left of the screen - but at least the boxes are
differently sized

                SBUG: : Firefox, IE9, Safari and Chrome all seem to drawn
boxes around the glyphs, but though the boxes have different widths, they
all have the same height. 

 

If these browsers are behaving according to spec here then:

                SBUG: the spec has a bug regarding getExtentOfChar. What
good is it if you can't do this? 

 

Finally, does anyone know any other way to accomplish this simple
typesetting feature through script, without doing it by hand and eye? The
spec's text description is lengthy and complex and I have forged into it
several times now without seeing anything to do this. There are things it
talks about which I know I don't understand, but then one gets the sense
that one might not need to know them, unless one is building a user agent.
I have not seen anything in the test suite
(http://dev.w3.org/SVG/profiles/1.1F2/test/svg/ ) which would address this.

 

I found Cameron (heycom) and Bjoern talking about a GVTGlyphVector method in
2006, but that seems to be a Batik only thing, SFAIK.

 

Ideas?

David