Custom CSS Stylesheets for Calibre's Viewer - Page 7

theducks · 10-24-2011, 12:13 PM

Quote:

Originally Posted by cerramadre

Hi,

I'm new to Linux so I haven't a clue of where in the main File System folder programs get stored etc.

Does anyone know exactly where I should put my background image to get it to work with the ebook viewer?

My system is using Linux Ubuntu 11.04 - Natty I believe.

Thanks.

User (override) images are put in the <Calibre Configuration directory>/resources/images folder.
To find the folder: Preferences: Miscellaneous: press the button

create the images path if needed

cerramadre · 10-24-2011, 05:37 PM

Quote:

Originally Posted by theducks

User (override) images are put in the <Calibre Configuration directory>/resources/images folder.
To find the folder: Preferences: Miscellaneous: press the button

create the images path if needed

Thanks.

_reader · 10-27-2011, 08:41 PM

Quote:

Originally Posted by carthoris

i use those:

NORMAL:
------------------

body {color:rgb(0,0,0);
background-color:rgb(200,200,200);
text-indent:2em;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;}
h1, h2, h3, h4, h5, h6
{color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

DARKER:
--------------------

body {color:rgb(0,0,0);
background-color:rgb(192,192,192);
text-indent:2em;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;}
h1, h2, h3, h4, h5, h6
{color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

NIGHT:
-------------------

body {color:rgb(184,184,184) ;
background-color:rgb(0,0,0) ;
text-indent:2em;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;}
h1, h2, h3, h4, h5, h6
{color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

2 COLUMNS:
-------------------

body
{
color:rgb(0,0,0) !important;
background-color:rgb(200,200,200);
text-align:justify;
line-spacing:1.8;
margin-top:1px;
margin-bottom:1px;
margin-right:10px;
margin-left:10px;

-webkit-column-count: 2;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px dotted;

height: 650px;
width:1200px

text-indent: 2em;
}
h1, h2, h3, h4, h5, h6
{
color:black;
text-align:center;
font-style:italic;
font-weight:bold;
}

I tried the 2-Columns mode (above) which displays 2-cols, but page-forward doesn't advance (either by the arrow-icons, Page Down/Up, space bar, or mouse wheel). Suggestions?

I'm looking to simulate an open book with two pages to view on my laptop or desktop wide screen.

foosion · 10-29-2011, 10:20 AM

Why does this result in wide margins at the sides of each page (as expected), but the text flush with the top and bottom of Calibre's viewer? I tried larger numbers for margin-top and -bottom, without success.

Code:

body 
{
margin-right:200px !important;
margin-left:200px !important;
margin-top:50px !important;
margin-bottom:50px !important;
}

DoctorOhh · 10-29-2011, 10:32 AM

Quote:

Originally Posted by foosion

Why does this result in wide margins at the sides of each page (as expected), but the text flush with the top and bottom of Calibre's viewer? I tried larger numbers for margin-top and -bottom, without success.

It would appear that the calibre viewer doesn't do top or bottom margins.

foosion · 10-29-2011, 10:38 AM

Quote:

Originally Posted by dwanthny

It would appear that the calibre viewer doesn't do top or bottom margins.

That seems a rather odd omission

Is there any way to fake it in css?

Height:80% didn't work. I believe adding a header and footer would require editing the underlying book.

DoctorOhh · 10-29-2011, 11:22 AM

Quote:

Originally Posted by foosion

That seems a rather odd omission

Is there any way to fake it in css?

I don't believe there is any way to fake this.

The viewer is a ePub viewer, all formats are essentially converted to a form of ePub prior to viewing. Since ePub is a reflowable format the pages change with the font and screen size. So it basicly scrolls the internal html like a browser. Side margins are simple but top and bottom margins, while possible, are quite a bit harder when you are dealing with a format that has unpredictable page lengths.

foosion · 10-29-2011, 11:36 AM

Quote:

Originally Posted by dwanthny

Side margins are simple but top and bottom margins, while possible, are quite a bit harder when you are dealing with a format that has unpredictable page lengths.

Top and bottom margins should be easy to program.

Instead of writing to the screen starting at y coordinate 0 (relative to the containing window), start writing to the screen at y coordinate margin-top (and stop at bottom of window minus margin-bottom). You wouldn't have to make any changes to the flow of the underlying text.

Left and right margins are more complicated, as the text does have to be re-flowed as they change.

theducks · 10-29-2011, 11:50 AM

Doesn't <body> apply to the entire file and not just the viewport (Calibre)?
Add onto this the Calibre-viewer connects (flattens) the entire book beginning to end (CR3 does the same) and would naturally discard any top and bottom Body Margins in the process.

foosion · 10-29-2011, 12:01 PM

Quote:

Originally Posted by theducks

Doesn't <body> apply to the entire file and not just the viewport (Calibre)?
Add onto this the Calibre-viewer connects (flattens) the entire book beginning to end (CR3 does the same) and would naturally discard any top and bottom Body Margins in the process.

It should be possible to start writing text at X pixels from the top of the window in which the viewer writes text, rather than at 0 pixels as it currently does. If this is not technically "margin-top", it is the functional equivalent.

By "viewport" do you mean the window in which Calibre displays the book?

theducks · 10-29-2011, 03:54 PM

Quote:

Originally Posted by foosion

By "viewport" do you mean the window in which Calibre displays the book?

Yes. you only get to see part of the body through the (viewer) portal

foosion · 10-29-2011, 04:24 PM

Another way to implement margins would be to put a border between the viewport and its enclosing frame. The size of the border would depend on the margin settings (or some other settings). The border would be the same color as the viewport's background color.

Clearly the enter viewer, including the viewport, is resizable, so making the viewport a bit smaller should be easy.

If I understand correctly, the css stylesheets operate within the viewport, so we can't add such a border using a css stylesheet.

foosion · 10-30-2011, 11:57 AM

As a proof of concept (implemented by adding a border widget, shown in red for clarity):

DoctorOhh · 10-30-2011, 10:02 PM

Quote:

Originally Posted by foosion

As a proof of concept (implemented by adding a border widget, shown in red for clarity)

Excellent, now make the widget color selectable, in another forum someone was asking for a reader where the border background was black. Then submit the info in an enhancement request to see if it can be added to calibre.

kovidgoyal · 10-31-2011, 07:53 AM

Sticking a blank space outside the viewport is not an acceptable way to implement this. You have to match the background color to the background color of the book page which may or may not be white. Since the calibre viewer supports javascript, you'd have to dynamically change the color if a script in the book page changed the background color. And negativeve co-ordinates in the css will not work correctly. Then a book can define different margins in every html file it contains, so you'd have to watch for that and adjust dynamically. All in all, that makes this approach too hacky for the functionality it provides.

10-29-2011, 10:20 AM	#94
foosion Enthusiast Posts: 45 Karma: 4562 Join Date: Sep 2011 Device: Galaxy Nexus, iPad	Why does this result in wide margins at the sides of each page (as expected), but the text flush with the top and bottom of Calibre's viewer? I tried larger numbers for margin-top and -bottom, without success. Code: body { margin-right:200px !important; margin-left:200px !important; margin-top:50px !important; margin-bottom:50px !important; }

10-29-2011, 11:50 AM	#99
theducks Staff to 4 Cats Posts: 10,953 Karma: 2574555 Join Date: Aug 2009 Location: The (original) Silicon Valley, USA Device: Galaxy Tab 2,Black Astak PEz, K4NT(now Wifes)	Doesn't <body> apply to the entire file and not just the viewport (Calibre)? Add onto this the Calibre-viewer connects (flattens) the entire book beginning to end (CR3 does the same) and would naturally discard any top and bottom Body Margins in the process. __________________ Using: Ubuntu(32 bit):Oneric,Precise and XPpro SP3, W7HP(64)- - Libre Office w/Writer2EPUB

10-31-2011, 07:53 AM	#105
kovidgoyal Creator of calibre Posts: 22,657 Karma: 3473290 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Sticking a blank space outside the viewport is not an acceptable way to implement this. You have to match the background color to the background color of the book page which may or may not be white. Since the calibre viewer supports javascript, you'd have to dynamically change the color if a script in the book page changed the background color. And negativeve co-ordinates in the css will not work correctly. Then a book can define different margins in every html file it contains, so you'd have to watch for that and adjust dynamically. All in all, that makes this approach too hacky for the functionality it provides. __________________ Get calibre Notice to all: I can not provide assistance with DRM removal, for legal reasons, so please do not contact me about it.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Custom CSS for output	deckoff	Calibre	1	08-28-2010 11:55 PM
ePub with custom .css on a 505	dicknskip	Sony Reader Dev Corner	3	06-09-2010 11:34 PM
User stylesheets for ePub files	salty-horse	Sony Reader Dev Corner	12	02-23-2010 07:44 AM
ePub conversion: override existing css with a custom one	sbin	Calibre	1	01-09-2010 04:03 AM
Calibre's generated css for epub	brewt	Calibre	7	12-29-2008 09:59 AM

10-29-2011, 04:24 PM	#102
foosion Enthusiast Posts: 45 Karma: 4562 Join Date: Sep 2011 Device: Galaxy Nexus, iPad	Another way to implement margins would be to put a border between the viewport and its enclosing frame. The size of the border would depend on the margin settings (or some other settings). The border would be the same color as the viewport's background color. Clearly the enter viewer, including the viewport, is resizable, so making the viewport a bit smaller should be easy. If I understand correctly, the css stylesheets operate within the viewport, so we can't add such a border using a css stylesheet.

10-30-2011, 11:57 AM	#103
foosion Enthusiast Posts: 45 Karma: 4562 Join Date: Sep 2011 Device: Galaxy Nexus, iPad	As a proof of concept (implemented by adding a border widget, shown in red for clarity):


Advertisement Enthusiast