Last modified: 2006-10-27 12:07:14 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T8456, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 6456 - SVG text postioning is invalid.
SVG text postioning is invalid.
Status: RESOLVED WORKSFORME
Product: MediaWiki
Classification: Unclassified
File management (Other open bugs)
unspecified
All All
: Normal major with 1 vote (vote)
: ---
Assigned To: Nobody - You can work on this!
http://test.wikipedia.org/wiki/Image:...
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2006-06-26 22:44 UTC by Nux
Modified: 2006-10-27 12:07 UTC (History)
0 users

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Nux 2006-06-26 22:44:49 UTC
I must say in some ways wiki SVG engine is better then Firefox's and even
Opera's (at least 8.0)... However there is a big issue of positioning the text.

I don't know why, but the text gets put only on some fixed positions like it
would be attached to some grid.

Someone made this test image with Inkscape:
http://test.wikipedia.org/wiki/Image:Test.svg

I made a simplified test here:
http://test.wikipedia.org/wiki/Image:Text_positioning_test.svg

You may see the above in Opera Browser to get the idea of what it should look
like. Generally the idea was to render all 3 as O<sub>2</sub>. Please look into
the code of SVG to see what is done there.

Issues:
1. The baseline of text is not (vertically) aligned to the given coordinates.
2. Only transform attribute gives the possibility to move text freely.


Document on text elements in SVG (just for reference):
http://www.w3.org/TR/SVG/text.html
Comment 1 Nux 2006-06-30 17:01:49 UTC
I don't know how this is done, but I have a genaerall idea of how to quickly
solve this.

1. Render text to 0,0 cords.
2. Translate the _picture_ to the cords given by computed values. By computed I
mean from all dependecies that it is done now plus from dx,dy in some next version.
Comment 2 Nux 2006-10-27 12:06:42 UTC
OK. There is a hack for this one, so I say it works for me ;).

The problem is that if one makes a picture so small that has to use fonts like
1px size or something like that, then it won't work. The simplest solution is to
multiply all text position and width values by 10 or 100 (pretty easy to
recalculate by hand). All other elements should scaled by the same value which
might be done by hand or they could be grouped and scaled like this:
<g transform="scale(10)">
   non-text elements here
</g>
viewBox also has to be change (multiplying it's values by the same value)

For a hack in works see new version of:
http://test.wikipedia.org/wiki/Image:Text_positioning_test.svg

(resizing whole SVG to 400x240 was only for fitting the test picture in my
screen and not really an issue here, viewBox also has to be changed)

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links