SVG vertical captions and layout

[GrannyGrump]

Errrrr, yeah. I know I said I wouldn't be messing with rotation, but it is a woman's right to change her mind, isn't it?

I would like to run some captions along the *left* edge of the page, and by looking at one of SBT's books in the MR library, I got the caption placement and rotation kind of figured out. But I'm not so sure if my twiddles on the image placement is the correct way to do this (it was all by trial and error, you see).

<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="-75 0 600 720" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

<image height="720" width="500" xlink:href="../Images/001.jpg"/> 

 <g transform="translate(-50 360) rotate(90 0 0)">
<text style="font-style:italic;font-size:20pt" x="-80pt">"My Weird Caption"</text></g> 
 
 </svg>
</div>

So are the negative coordinates really the correct way to do this, or did I just stumble on something that happened to work out?

[mrmikel]

It works in the Sony Reader Library, right or not. I suspect you can not scale it because you have to set a viewbox of a given size, but it is still a good step forward.

[GrannyGrump]

mrmikel, thanks for responding.

I've viewed this in the Sony software (Sony is very sluggish on every pc I try it on, takes 3 - 5 seconds just for a page turn!), with ADE, and Calibre, and the images seem to scale ok when the window is resized. I am going to push ahead on the assumption that this code will work.

[RbnJrg]

Originally Posted by GrannyGrump

I would like to run some captions along the *left* edge of the page...

You have several ways to accomplish that with SVG; read this article:

http://commons.oreilly.com/wiki/inde...#Vertical_Text

Regards
Rubén

[GrannyGrump]

Rubén, thank you for that link. That is a very nice source of information. Excuse me, I have to go study now...

[pholy]

Originally Posted by RbnJrg

You have several ways to accomplish that with SVG; read this article:

http://commons.oreilly.com/wiki/inde...#Vertical_Text

Regards
Rubén

Indeed, that link will get you to the whole book on SVG. The TOC is in the upper right of the page. Now I can see if I wrote good code or if the PRS-T1 has some bugs in its SVG rendering. Thanks again, Rubén.

[SBT]

I do remember muttering some reprehensible phrases, struggling with PRS-505's wretched SVG implementation, which doesn't even support text centering.
Even though SVG support is much improved now, I've ended up just rotating landscape illustrations to portrait, but without reducing the resolution accordingly.
My reasons are a yearning for simplicity (or laziness, as some call it), but also that most readers support display in landscape mode, so if I really want to admire a landscape, I can flip it around. The turning point came when I read one of my books containing landscape-mode illustrations on a tablet in auto-rotate mode – whenever I flipped the tablet sideways to look at a painting, it was flipped to portrait mode...

[RbnJrg]

Originally Posted by pholy

Indeed, that link will get you to the whole book on SVG. The TOC is in the upper right of the page. Now I can see if I wrote good code or if the PRS-T1 has some bugs in its SVG rendering. Thanks again, Rubén.

You are very welcome!

[Jellby]

Originally Posted by SBT

My reasons are a yearning for simplicity (or laziness, as some call it), but also that most readers support display in landscape mode, so if I really want to admire a landscape, I can flip it around. The turning point came when I read one of my books containing landscape-mode illustrations on a tablet in auto-rotate mode – whenever I flipped the tablet sideways to look at a painting, it was flipped to portrait mode...

Exactly. Now I always include the pictures in their natural orientation.

[GrannyGrump]

"Natural" meaning in the way they were layed out in the print book, or natural as in the horizon is always horizontal?


edit to add PS: I still have not found any info to confirm if using negative coordinates to position the image in the SVG wrapper is legitimate code. Anybody?

[Jellby]

Originally Posted by GrannyGrump

"Natural" meaning in the way they were layed out in the print book, or natural as in the horizon is always horizontal?

The latter, the way they are intended to be viewed.

edit to add PS: I still have not found any info to confirm if using negative coordinates to position the image in the SVG wrapper is legitimate code. Anybody?

I would be surprised if it wasn't.

[GrannyGrump]

@Jellby, thanks for confirming. And big thanks for your patience, I'm slow on the uptake these days...