Rotated text not rendering for native fonts

[GoogleCodeExporter]

Rotated text is not displaying at all (for native fonts). See example 
below. 

Work Around:
SVG Fonts should rotate OK.

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<text transform="rotate(-90)" x="0" y="15" 
style="fill:blue;font-family:sans-serif;font-size:18px;font-
weight:bold;tex­t-anchor:end;">Mr WordPress</text> 
</svg> 

This issue was originally reported by Daniel Llewellyn.

Original issue reported on code.google.com by grick23@gmail.com on 15 Jul 2009 at 7:38

[GoogleCodeExporter]

This article confirms text rotation for native fonts does not work in flash 9 
and it
also describes two new methods in flash 10 for rotating native fonts.

http://www.yswfblog.com/blog/2009/05/21/the-knack-to-rotating-dynamic-text-in-fl
ash-10/

We currently do not support features specific to flash 10. When we do, it looks 
like
this issue can be resolved.

Original comment by grick23@gmail.com on 23 Jul 2009 at 1:29

[GoogleCodeExporter]

I have a quick fix for this using flex4 SDK and flash 10.
You simply add the following line:
this._textField.rotationZ = 0;
after line 202 in SVGTextNode.as
However, the result is text-anchor middle and end are screwed up and the font 
is then 
a bitmap.  The bitmap part is OK unless the text is scaled up - then it looks 
like 
crap as expected.  If the above code could be applied only if the SVGTextNode 
has a 
rotation value applied, then this would be a temporary fix.  The final solution 
seems 
to be to embed the font as per:
http://www.tom-carden.co.uk/2008/10/01/text-along-a-path-in-flash/
This will also give us textPath

Original comment by bruce.ri...@gmail.com on 28 Aug 2009 at 11:11

[GoogleCodeExporter]

as a followup to this, I've implemented the partially-suggested rotationZ=0 
fix, and
it's working great.. however, with the following svg it appears correctly in 
firefox
using native rendering, however in IE8 using flash the text appears pushed down 
the
viewport by about 325 pixels. (I can fix it in IE by changing x="0" to x="325", 
but
then firefox displays with the text pushed up the viewport by said amount.)

<script type="image/svg+xml">
<svg id="indweblink" width="25" height="100%">

    <a xlink:href="http://127.0.0.1/" target="_top">
        <rect width="100%" height="100%" fill="#000000"/>
        <text id="indweblink_text"
            transform="rotate(-90)"
            x="0" y="15"
            style="font-family:sans-serif;font-size:18px;fill:rgb(0,128,64);text-anchor:end;">
            This text is pushed off position vertically by 325px
        </text>
    </a>

</svg>
</script>

Original comment by diddle...@gmail.com on 7 Sep 2009 at 5:58

[GoogleCodeExporter]

Re: Comment 3
This is the same as what I observed - the text-anchor calculations are all 
screwed up 
when using this.

Original comment by bruce.ri...@gmail.com on 8 Sep 2009 at 4:04

[GoogleCodeExporter]

This defect is blocking Dojo GFX test cases:
o  test_fx.html
o  test_text.html

See: http://bugs.dojotoolkit.org/ticket/9948

Original comment by ccmitche...@gmail.com on 29 Sep 2009 at 2:30

[GoogleCodeExporter]

I've confirmed that this appears in one of the unit tests in
tests/browser-tests/test_js1.html. I've created a minimized test case 
(testme.html)
that shows the issue. I've also attached screenshots of the correct behavior in
native (correct.png) and incorrect behavior in the Flash renderer 
(incorrect.png).
Correct behavior is to show the words "Hello World!" rotated along the 
left-hand side
of the page.

I think James Hight had some code in his original codebase that would handle 
this. If
rotate was applied he would transform the text into a bitmap and then rotate 
that
bitmap. It seemed to work; text selection wouldn't work of course but that was a
valid workaround if things were being rotated.

Original comment by bradneub...@gmail.com on 10 Nov 2009 at 4:37

Attachments:

• testme.html
• correct.png
• incorrect.png

[GoogleCodeExporter]

bruce.rindahl has a patch above; I haven't reviewed it though. Adding Patch tag.

Original comment by bradneub...@gmail.com on 19 Nov 2009 at 9:36

• Added labels: Patch

[GoogleCodeExporter]

brad, the patch to apply the rotationZ=0 setting to the textfield requires that 
the swf be compiled to target flash 
10 and above only in my tests. It also converts the textfield into a bitmap 
rather than vectors, which means that 
zooming causes issues unless you resample the bitmap (I've not looked into how 
that could be achieved)

Original comment by diddle...@gmail.com on 19 Nov 2009 at 9:40

[GoogleCodeExporter]

Confirming Comment 8
This was a quick test to see if the text could then be rotated.  It worked but 
it
caused more problems than it is worth.  I now use SVG fonts for any text that 
needs
to be rotated.  If the fallback system font is the same then FF ignores the SVG 
font
and rotates the system one.  Results are identical.  

Original comment by bruce.ri...@gmail.com on 10 Dec 2009 at 6:07

[GoogleCodeExporter]

Issue 470 has been merged into this issue.

Original comment by grick23@gmail.com on 10 Apr 2010 at 4:34

[GoogleCodeExporter]

Issue 480 has been merged into this issue.

Original comment by grick23@gmail.com on 21 Apr 2010 at 10:25

[GoogleCodeExporter]

Re: Comment #9
I am not sure I agree that rotationZ causes more problems then it is worth. The
current behavior does not display anything at all. Text that scales like a 
bitmap
sucks, but it seems better than not displaying anything at all. So, my current 
plan
is to implement this using rotationZ. I am not sure what is involved with the 
anchor
options. Those could be difficult to implement. I'll see what I can do.

Original comment by grick23@gmail.com on 21 Apr 2010 at 10:33

[GoogleCodeExporter]

Could we have a "patched" and non patched sfw file in the repos?
Im not in the position to use adobe tools to compile a new swf myself, and would
still like to apply the rotationZ "patch"

Original comment by janklop...@gmail.com on 26 May 2010 at 8:53

[GoogleCodeExporter]

Original comment by grick23@gmail.com on 4 Jun 2010 at 2:01

• Added labels: Priority-High
• Removed labels: Priority-Medium

[GoogleCodeExporter]

Partially fixed in r1168. It looks pretty good actually.

Issue 158; Native fonts do not display if skewed or
rotated. So, we need to use the rotationZ=0 trick
to convert to a bitmap, otherwise the text disappears.
Note we need to check the parents for transforms also.

Note this is the first compile for Flash 10.
The resulting SWF had problems with mx.utils.StringUtil.trim
so I switched those over to SVGColors.trim.

According to the links in the comments above, the TextBlock pattern is a better 
solution for transformed text, so this issue will remain open pending research 
into that solution.

Original comment by grick23@gmail.com on 9 Jun 2010 at 5:39

• Changed state: Started

[GoogleCodeExporter]

grick23

Your fixed working great for rotation's issue but the "textPath" it's still 
broken

could you please take a look    

thx

Original comment by raul.Ju...@gmail.com on 9 Jun 2010 at 9:30

[GoogleCodeExporter]

We do not support textPath. That is Issue 169.

Original comment by grick23@gmail.com on 9 Jun 2010 at 9:45

[GoogleCodeExporter]

I am seeing results where the quality of rotated text is always poor, but 
depends on rotation angle (nothing at all for rotations outside +/-90 degrees, 
best for values near 0, but never really readable).  Is this the same issue as 
here?

Also, please can someone explain what "SVG fonts" (which apparently work) 
means?  Are these certain font-family values?  Or do I need to include a font 
element in the svg?  The above problem occurs with font-family attribute on the 
text element set directly to monospace or sans-serif or helvetica.

This is with the latest version (svgweb-2010-08-10-Owlephant-1.zip) on FF 
3.6.10 with Flash 10 on Linux.

Original comment by acooke....@gmail.com on 19 Oct 2010 at 1:40

[GoogleCodeExporter]

SVG Fonts allow you to specify inside of your SVG file font glyphs using SVG 
itself. Details here:

http://www.w3.org/TR/SVG/fonts.html

Original comment by bradneub...@gmail.com on 16 Nov 2010 at 10:10