CSS code for different screen sizes?

clemens14 · 09-11-2011, 04:02 PM

Hello,

are there ways to prepare the CSS so that the text is displayed according to the size of the screen of the reader?
In other words is it possible to decide in the style sheet how the text should be displayed with different readers?

Jellby · 09-12-2011, 04:11 AM

Other than using percentages for lengths, no, there aren't.

You could use alternate stylesheets, but I'd guess no reader supports them.

charleski · 09-12-2011, 07:37 PM

There is a method that would only work on ADE-based readers, using the page-template.xpgt extension. See the sections on dynamic styling here and here.

But I do not recommend using it - note that the Adobe page is from an old snapshot, it's actually been taken down from Adobe's own website and they stopped actively supporting this extension many years ago (though AFAIK it still works in current readers). It's also, obviously, extremely non-standard.

This sad situation is not going to change materially with ePub3, since it lacks a page-model. At least you'll be able to use javascript to mutate the styles to suit different displays (and you may be able to do that now if you're targeting iBooks and want different layouts for phone vs iPad), but it'll be a lot of work.

09-11-2011, 04:02 PM	#1
clemens14 Enthusiast Posts: 26 Karma: 10 Join Date: Jul 2010 Device: none	CSS code for different screen sizes? Hello, are there ways to prepare the CSS so that the text is displayed according to the size of the screen of the reader? In other words is it possible to decide in the style sheet how the text should be displayed with different readers?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
epub code snippets (html / css)	zelda_pinwheel	ePub	196	10-09-2016 04:21 AM
K3 screen protector. K2 & K3 screen sizes?	bfollowell	Amazon Kindle	1	02-28-2011 04:47 PM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM
css override code for margins?	Amalthia	Calibre	15	08-11-2009 07:20 PM
css override code for <h2> and <h1> tags	Amalthia	Calibre	2	03-29-2009 06:51 PM

09-12-2011, 04:11 AM	#2
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Other than using percentages for lengths, no, there aren't. You could use alternate stylesheets, but I'd guess no reader supports them.

09-12-2011, 07:37 PM	#3
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	There is a method that would only work on ADE-based readers, using the page-template.xpgt extension. See the sections on dynamic styling here and here. But I do not recommend using it - note that the Adobe page is from an old snapshot, it's actually been taken down from Adobe's own website and they stopped actively supporting this extension many years ago (though AFAIK it still works in current readers). It's also, obviously, extremely non-standard. This sad situation is not going to change materially with ePub3, since it lacks a page-model. At least you'll be able to use javascript to mutate the styles to suit different displays (and you may be able to do that now if you're targeting iBooks and want different layouts for phone vs iPad), but it'll be a lot of work.