Any opinions or advice on 1. How to top-justify text (as tried in http://www.mail-archive.com/[email protected]/msg14358.html ) 2. Given that every browser displays and scripts the above file differently, who does it correctly?
Am wondering who to assign bug reports to. cheers David ----- Original Message ----- From: ddailey To: [email protected] Sent: Tuesday, January 04, 2011 5:13 PM Subject: [svg-developers] trampolining and difficulties aligning text to its overline I have moved the introduction* of this to the end so as to save the reader from my inspired prose. While arming yourself with all available SVG viewers, consider the example at http://granite.sru.edu/~ddailey/svg/tspanmeasure.svg I was trying to "top-justify" the word Trampoline so that all of its letters would be taut across the top rather than the bottom. Why? You ask. Well, short of reading the introduction*, let me offer the following observations: a) I browsed through some 28 versions of CSS (you may think there are only 4 or 5!) and found no reference to it b) it is a textual effect found in the "wild". On the very same day that I set about to accomplish it (some weeks ago now), I asked my two kids to help me find examples. Within a few hours of shopping, talking and eating, we had found five examples: two signs on local stores, a spice bottle, and two novels. ** Real people top-align text! (I had planned to let the "o" in trampoline bounce upon the taut top of the word (ideally using SMIL), with the top adjusting to a curve formed by the deformation of the bounce -- but that will have to wait for some more primitive things to happen first!) So here's what I tried: write the text inside tspans (I also have a script elsewhere which takes any text and manufactures a tspan for each letter) and then, via script, adjust the dy associated with the letters based on their actual sizes. Questions: 1. Can you find any way to do this (short of fiddling numbers by hand)? (If we can just nudge up the p and the g, we'll have it!) 2. Why doesn't getBBox work with <tspan> in many browsers? (It does in IE and Opera, but the others are most unhappy). I used getExtentOfChar instead, but in doing so, it wasn't quite clear to me what getExtentOfChar does that getBBox doesn't. An equivalent question might be why do we even have getExtentOfChar? Observations: 0. This example is frought with a plethora of rather gnarly browser inconsistencies. 1. I tried reading the letters and rendering each inside its own <text> . Believe it or not, this didn't fix the browser inconsistencies! They were every bit as pronounced with <text> objects as with <tspan>, once I abandoned hope for getBBox in favor of getExtentOfChar. More detailed analysis can be reviewed at http://granite.sru.edu/~ddailey/svg/textmeasure.svg 2. Browser oddities: a. ASV(IE) -- comes closest to the desired effect --didn't like .getBBox() applied to a <tspan> -- didn't align p or g to the same top line as the others (presumably since they extend below the text baseline) b. Opera -- behaves much like ASV in its ability to top align most of the text --allows .getBBox() applied to a <tspan> but seems to return a value inherited from the parent text node (I suspect the spec doesn't say what to do-- since <tspan> may not be required to be measurable) -- doesn't allow text-decoration="overline" to remain continuous above differently offset glyphs (I suspect this is a bug in Opera since all the others seem to remain continuous and continuous makes sense) --drawing rectangles around the letters fails (I suspect this is a bug in Opera since all the others seem to do what makes sense) --kerning between <tspan> fails (I suspect this is a bug in Opera since all the others seem to do what makes sense) c. Firefox --measures all characters as having the same getExtentOfChar (the problem is not corrected by using getBBox) (I suspect this is a bug in Firefox since ASV and Opera seem to do what makes sense) -- does not allow for text-decoration="overline" (I suspect this is a bug in Firefox) d. Chrome -- does not vertically realign the characters -- measures them all the same (I suspect this is a bug in Chrome) -- styles text-decoration="overline" with stroke-width of one, allowing red stroking of the font to be visible (I suspect this is a bug in Chrome) e. Safari -- appears to have the union of all problems found in all browsers and doesn't implement getExtentOfChar , returning values of zero. David (so how would this work in Action Script?) ------------------------------------- *You may recall a couple of months ago, I was musing about how to make a "copyleft" symbol preserving perceptual and semantic accuracy as well as accessibility. What is the meaning of a circle with a line through it after all, and does that meaning differ as a function of what is put inside it? I'm convinced that the ones contained at Wikimedia Commons are wrong (on a bevy of levels), but barring the emergence of a canonical one, I've not mustered the courage to replace it. Anyhow, the exercise reminded me a bit of old wordart puns that used to appear in Playboy magazine (yes I only read it for the cartoons) : things like "elevate" with one of the "e"s raised above the others or "CXNSORXD" . In high school I drew about a hundred of them: words for which the orthography somehow matches the semantics. I called them double-doubles. The copyleft symbol has a bit of a pun embedded in it since the circle that surrounds the c in the copyright symbol (as per its original definition in US law -- whence it was borrowed apparently by the rest of the world) is the same circle involved in the universal symbol for "don't" -- namely a circle with a line through it. That is, if we really wanted to say "don't copyright" then we would use two circles rather than one, though the ancestral humorist embedded in the forebrain of each of our species recognizes the humor at some subliminal level and smiles. One of the things one needs to be able to do to make visual puns of this type -- using orthography to mirror meaning -- is to make liberal use of <tspan> . <tspan> it turns out, however, seems not to be one of the favorite things of the browser manufacturers, probably because they have done analyses that show no one ever uses it. Of course such analyses often neglect to take into effect the fact that perhaps the reason no one uses a feature is that it has such spotty support! (I am fighting the temptation to once more praise IE+ASV, or to mention the HTML WG where such studies seem to proliferate for nefarious ends!) However <tspan> means that text remains readable! This is often a requirement of accessibility. You may be convicted of felonies or held up to public ridicule or worse for writing <text style>a</text><text style>m</text> instead of <text><tspan style>a</tspan><tspan style>m</tspan></text> . And, I have come to realize (perhaps rather late in the game) that accessibility is one of SVG's true merits! So how can one make all the wonderfully rich and artistic uses of fonts that one finds in the wild? <tspan> of course. Unfortunately SVG doesn't allow rotation of <tspan> about a centroid, and some other things about it are goofy. My sense is that it needs more work, but I digress. ** Spice Classics (logo) Ranger's Apprentice (book series by John Flanagan) Skybreaker (book by Kenneth Oppel) BootBox (local store in Pennsylvania) Blue Ribbon (local tavern in Pennsylvania) [Non-text portions of this message have been removed] [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
