Aura Vertical text support in epub?

pluma · 12-17-2016, 06:17 PM

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.

tshering · 12-17-2016, 07:12 PM

Did you test with filename.kepub.epub or only with filename.epub?

pluma · 12-17-2016, 08:23 PM

Quote:

Originally Posted by tshering

Did you test with filename.kepub.epub or only with filename.epub?

What do you mean? I package the files with zip. I don't understand. Which one of the following do you meant?

1.

Code:

title.epub

2.

Code:

title.kepub

3.

Code:

title.kepub.epub

My epub is this filename: title.epub

thanks.

DNSB · 12-18-2016, 02:07 AM

Quote:

Originally Posted by pluma

What do you mean? I package the files with zip. I don't understand. Which one of the following do you meant?

1.

Code:

title.epub

2.

Code:

title.kepub

3.

Code:

title.kepub.epub

My epub is this filename: title.epub

thanks.

If you name the file as filename.kepub.epub, it will use a epub3 compliant renderer (ACCESS NetFront or PUBPLUS) rather than the Adobe RMSDK renderer. If you are using Calibre with the KoboTouchExtended driver, it will do the rename for you and make other modifications to the file to more or less match what Kobo does when generated their kepub files.

12-17-2016, 06:17 PM	#1
pluma Enthusiast Posts: 48 Karma: 854254 Join Date: Nov 2016 Device: none	Vertical text support in epub? 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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Any Chinese vertical text ePub 3 samples?	Nil Einne	ePub	2	08-05-2022 12:10 PM
Vertical Text	Hopkins	Sigil	3	08-11-2016 08:16 PM
Vertical text?	AlexBell	ePub	17	06-17-2015 07:35 PM
Vertical text : asian characters unturned	fxp33	Sigil	7	08-22-2014 06:38 AM
Vertical text alignment OCR	bookmeal	Workshop	7	11-14-2011 03:28 PM

12-17-2016, 07:12 PM	#2
tshering Wizard Posts: 3,489 Karma: 2914715 Join Date: Jun 2012 Device: kobo touch	Did you test with filename.kepub.epub or only with filename.epub?

Advert