Hi,

What I would like to do is to add the current chapter name (i.e. <h1>) as vertical text in the left margin of my page.

As far as I can see, the way to achieve this would be: after each <h1>, output the chapter name again but wrapped in the necessary SVG to rotate the text, capture that flow, then output the flow in @left.

Is there a simpler way?

It seems a shame that we can't add markup using content: i.e.

@left {
content: '<svg><g><text>' flow(chapterTitle) '</text></g></svg>';
}

h1 { flow: static(chapterTitle) }

Is there something fundamental that stops that from happening?

Regards

Peter

There is no way to create markup like that in CSS yet, although it might be possible to combine SVG and named strings one day. Another option is support for text rotation or transforms in CSS, which would remove the need to use SVG for this particular feature. However, for now generating separate SVG is the only way.

Thanks Mike. I thought as much.

Peter

Out of curiosity, is vertical text of this type on the roadmap for version 7, or does that entry refer to something else?

I think what is needed here is text rotation or text orientation, as the text should still be left-to-right, only rotated 90 degrees. There are a few ways that this could be achieved, such as with the introduction of a new CSS property, or with closer integration between SVG and CSS.

I vote (for what it is worth) that we use the standard CSS markup so that maybe one day it will be supported by the browsers as well (direction, block-progression, or writing-mode... or a combination of them) to enable vertical text and then maybe implement a custom css tag to handle degrees for text that is angled.

I am typesetting a book that occasionally has pictures that are wide.

I would like to be able to rotate the entire picture, caption and all, 90 degrees so it faces outward toward the edge of the paper (and the reader turns the book sideways to view the picture and caption).

something like this:

div.sideways{rotation: 90}

or:

@page :left {div.sideways {rotation: -90}}
@page :right {div.sideways {rotation: 90}}

-c

You can do this for an entire page by making the page landscape, but at the moment you can't do it for content within the page unless that content is SVG and has a transform applied.

This is probably good enough for my needs. Thanks for the tip!