hallo,
I need to help trying to set text displayed vertically, not like japanese but the entire word rotated.
For these I've read about various solutions using css which aren't working. Reading further it appears that kobo doesn't use this css3 feature unfortunately.
So now I am playing with SVG text, which is kinda an ugly hack for something that's really a simple text manipulation.
The goal is to use SVG options to rotate the text.
For testing purposes to see what works in a KOBO device I am using this example which has two variants and the rendering is inconsistence because one is smaller than the other.
(from this link
http://www.mobileread.mobi/forums/sh...ad.php?t=44679 )
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<p>Here is inline SVG:</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<g xml:space="preserve" font-size="10" font-family="monospace">
<rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"/>
<text x="30" y="20"> XXX </text>
<text x="30" y="30">X X</text>
<text x="30" y="40">X X</text>
<text x="30" y="50">X X</text>
<text x="30" y="60"> XXXX</text>
<text x="30" y="70"> X</text>
<text x="30" y="80"> X</text>
<text x="30" y="90"> XXX </text>
</g>
</svg>
<p>A paragraph after SVG</p>
</body>
</html>
My question really is whether I need to use the long svg statement:
Code:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
As opposed to something more simpler:
Code:
<svg> <text></text> </svg>
The last one would be nice to use it. If it's not possible can somebody explain the difference?
Again, this is due to kobo device not being able to use css:
Code:
transform
-webkit-transform
Which for some other devices it's completely valid.
Finally if I am stuck with the long svg solution, would there be a way to link the svg code to an external file? How can I do this?
Let's say I have the following
Code:
<p><svg ...> ...</svg></p>
Is it possible to have the svg part on a separate file?
many thanks.