I'm working on a print stylesheet that includes uses generated content in the page margins like a running title:

content: url('logo.svg') ' Page Title';
padding-top: 30pt;
vertical-align: top;

I want to align align the image with the accompanied text so that they line up along an invisible line drawn on their top-edge. The default styling has them presented horizontally aligned to the bottom edge of their shared content area. If this were an image instead of generated content, I could float the image to get the alignment I want, but I don't know how to target individual items of generated content.

Any ideas?


2 answers


Generating imags with CSS has quirky support. And I doubt it will work very well in print stylesheets?

Are you after a high-res-version logo for the print version? Try adding an high-DPI image in the source code from the beginning and giving it a class of "print" that sets it to display: none; on screen media.

This will off course make the page a little more heavy but is a more robust solution.

Answered over 7 years ago by Jens Hedqvist

{ margin-top: 0px; }

That might work, if not play around with it, its something like that.

Answered over 7 years ago by Michael Fitzpatrick