EPUB files formatted okay XHTML not so much

condor · 04-04-2011, 07:42 PM

I'm trying to create a single XHTML file with inline CSS (in the head) that behaves like an EPUB does on the screen. The epub text fills the screen perfectly without going off the screen. I'm trying to create a generic XHTML file that is formatted on the screen the same way as the EPUB files I use.

But I can't get xhtml to behave the same way. The xhtml lets me slide the text leftward off the screen and if I make the text really small it will leave the right side of the screen bare. An epub won't do either of these things.

I'm not quite certain what I'm missing. The main difference is that I'm trying to include the css code in the head of the xhtml file rather than calling an external css file. I've tried to follow all the guidelines about putting css in the head of a file.

I suppose that I could see if I can make a generic external css file and put it in the same folder as all my xhtml files, to see if that makes any difference.

Has anyone else dealt with this?

RAH · 04-05-2011, 07:30 AM

First off, there should be no difference using an external css file or inline. If you're thinking this may be the reason, it's just a red herring.

Probably the reason you are having trouble is that the Nook uses its browser to read HTML, while it uses a completely different program (the epub reader) to read an epub. So it's no surprise that they work differently. Even though an epub file is just HTML embedded in a zip archive, an epub reader is not a browser and is customized for viewing on the small screen.

So, it seems to me that you need to format your css and html to look good on your PC with your browser's window narrowed down to the approximate WIDTH of a Nook device. Once you have it looking good on your PC, when you transfer it over to the Nook and view it on the Nook's browser, it should still look good. The problem is that the Nook is sooooo narrow. Most web pages are not designed to be viewed at such a narrow width.

My gut tells me that you would probably be best advised to make everything left justified, hugging the left margin, or maybe a few pixels off it. Then specigy a narrow width, etc.

condor · 04-05-2011, 05:56 PM

Thanks for the ideas. There seems to be some sort of function in the epub reader that faithfully confines the text to the screen. I'm curious how the epub software does it. (And like you say, the browser handles it differently.)

I'm really just making documents with hyperlinks in them and I want them to take best advantage of the screen, even if the user changes the size of the text.

Perhaps I can specify a 'page' width in pixels in xhtml? Thanks again.

RAH · 04-05-2011, 06:31 PM

Quote:

Originally Posted by condor

Perhaps I can specify a 'page' width in pixels in xhtml? Thanks again.

Yes, you can specify the width of any "element" in html by using css - set up a class with a width spec in pixels and then use it with a div tag. Anything in that div will conform to that width. I'm typing this on my color nook right now, so I cannot look up the syntax right now, but look for css rules under width.

Mow that I think about it more, I guess if you code it corrrctly it doesn't matter how eide the window on your PC btowser is for testing. It should appear in a narrow column anyway.

condor · 04-05-2011, 07:03 PM

I'm not certain if this will prevent a css approach, but Adobe ADE seems to use XML extensions to tell ADE what the screen size is. I'm guessing that the ADE application on the Nook Color contains a definition for the screen size.

I have no experience with XML or the XPGT extensions and even more specifically the XPath function.

I wonder ADE would read it if a person was crazy enough to write an XML document with the proper extensions. Probably not.

source:
https://wiki.mobileread.com/wiki/XPGT#Dynamic_Styling

(This is the first time I've called an id tag in an online source document. I usually just settle for the page name.)

condor · 04-05-2011, 08:35 PM

I was using

Code:

<body style="width:400px;">

and it properly restricted the text to 400 pixels wide. but the browser still does the scroll bar across the bottom of the screen and lets you slide the text off the screen.

The browser seems to allow wide screens. It seems reasonable for viewing web pages. But it allows an XHTML document to scroll text off the screen.

I was watching the scroll bar as I zoomed in and out. It works really well. It just isn't doing what I want.

RAH · 04-06-2011, 07:46 AM

I am a little confused here. I thought you were trying to create an html file (file extension .htm or .html) that would look like an epub on the Nook. But in your latest post you are talking about ADE extensions. But from looking at the link you supplied, the ADE extensions are extensions to EPUB. Therefore the extension for a file of that type should be .epub, right? And if it is .epub, the Nook will open it in its epub reader and probably have no trouble.

Are you trying to create your own epub from scratch (without using a tool such as Calibre or Sigil)? If so, from what I have read it is doable, if you browse this forum. If this is not what you are trying to do, why not just use Calibre and Sigil and produce an epub?

condor · 04-06-2011, 06:11 PM

Sorry about the confusion I caused. The diversion into epub topics was to find out why an epub works on the screen and how it could be applied to xhtml. But it looks like the epub reader is told what size the screen is, and it confines whatever it displays to that screen area.

The html browser seems to vary the size of the screen along with the size of the text. I haven't yet found a way to convince it NOT to vary the size of the screen.

RAH · 04-07-2011, 07:40 AM

OK, I understand now. One thing you could try - go to a website that recognizes a mobile device - for example, weather.com . If you have a color nook set to mobile mode, the webpage fits the screen very nicely, with no scroll bars. If you could get a look at the html on such a site, you might be able to get an idea of how they do it.

Trouble is, of course, how are you going to do that? Seems like you'd have to use your PC browser and do a View>Source and hope that the code for the mobile version of the webpage is in the code for the non-mobile version (i.e. via javascript or just different class usage). If it loads another page when it detects a mobile device, I'm not sure how you could look at the code for that other page, unless you could set your PC browser to mobile mode just for testing and viewing the source. Obviously I haven't looked into this, but it sounds like it might be fun.

RAH · 04-18-2011, 10:18 AM

I've been looking into this area a little more, and one thing I found is a CSS feature called CSS Media types - specifically the type "@media handheld". Do a Google search on "CSS @media" and you'll find a ton of info. Looks like one way to do what you want.

condor · 04-22-2011, 12:10 PM

Thanks for the info. There certainly are a lot of results for that search.

One of the difficulties is that the goal of modern XHTML page design is to be flexible, while I'm approaching this from the opposite direction of trying to force a specific page width. (with a possible second width for landscape mode)

I'm not very experienced with XHTML/CSS but have tried anything that I could find.

I'm still unable to force the page to stay a specific width in pixels. I can set the page width, but the Nook Color zooms in on the whole page rather than just changing the text size, which exceeds the original page width.

I also understand that the Nook Color does not support javascript, so any method that uses javascript to test screen size is out.

With epubs, the ADE software keeps the screen size fixed no matter what magnification you use.

I'm not confident that I can find a way to enforce a screen size in XHTML. I'm starting to think that it would be easier to display XHTML documents as an epub, especially if it would be possible to easily create or edit the contents of an epub without too many steps.

condor · 04-25-2011, 07:45 PM

I've given up on trying to use a browser to read HTML on the NC. Calibre makes it fairly easy to convert simple HTML and XHTML to an EPUB. Some users have noted problems with HTML tables, but narrow tables work fine.

The downside is that if you want to edit the content of the EPUB, it seems that you need to delete it off the NC, edit the original HTML file on your PC and then convert the updated file to an EPUB again.

RAH · 04-26-2011, 07:47 AM

Quote:

Originally Posted by condor

The downside is that if you want to edit the content of the EPUB, it seems that you need to delete it off the NC, edit the original HTML file on your PC and then convert the updated file to an EPUB again.

You can edit the epub file itself by using Sigil. Once I have converted HTML to epub, I seldom if ever go back to the HTML again.

Speaking of which, I had an rtf wordprocessor file that I converted to epub using Calibre. The file had a lot of images and resulted in a rather large epub file. The latest version of Calibre, when I converted from rtf to epub, gave me a message to instead use OpenOffice to convert the rtf to HTML and then convert the HTML to epub using Calibre. I did this and it worked MUCH better, giving me a smaller epub and better images.

So, the moral of the story is to use an HTML file when possible to convert to epub (which you are doing). But, as I say, once you are done, use Sigil to edit and fine-tune the epub - e.g. table of contents, some navigation screens (like say a list of illustrations that jump to the image), etc.

Of course, if you really have a webpage that you need to keep in synch with the epub, then you might want to start over each time with the HTML and reconvert.

condor · 04-29-2011, 10:31 AM

Thanks for the tips. I'll have to try Sigil. I don't use rtf files, but do appreciate the information on converting them in case it comes up.

04-04-2011, 07:42 PM	#1
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	EPUB files formatted okay XHTML not so much I'm trying to create a single XHTML file with inline CSS (in the head) that behaves like an EPUB does on the screen. The epub text fills the screen perfectly without going off the screen. I'm trying to create a generic XHTML file that is formatted on the screen the same way as the EPUB files I use. But I can't get xhtml to behave the same way. The xhtml lets me slide the text leftward off the screen and if I make the text really small it will leave the right side of the screen bare. An epub won't do either of these things. I'm not quite certain what I'm missing. The main difference is that I'm trying to include the css code in the head of the xhtml file rather than calling an external css file. I've tried to follow all the guidelines about putting css in the head of a file. I suppose that I could see if I can make a generic external css file and put it in the same folder as all my xhtml files, to see if that makes any difference. Has anyone else dealt with this?

04-05-2011, 05:56 PM	#3
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	Thanks for the ideas. There seems to be some sort of function in the epub reader that faithfully confines the text to the screen. I'm curious how the epub software does it. (And like you say, the browser handles it differently.) I'm really just making documents with hyperlinks in them and I want them to take best advantage of the screen, even if the user changes the size of the text. Perhaps I can specify a 'page' width in pixels in xhtml? Thanks again. Last edited by condor; 04-05-2011 at 05:59 PM.

04-05-2011, 07:03 PM	#5
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	I'm not certain if this will prevent a css approach, but Adobe ADE seems to use XML extensions to tell ADE what the screen size is. I'm guessing that the ADE application on the Nook Color contains a definition for the screen size. I have no experience with XML or the XPGT extensions and even more specifically the XPath function. I wonder ADE would read it if a person was crazy enough to write an XML document with the proper extensions. Probably not. source: https://wiki.mobileread.com/wiki/XPGT#Dynamic_Styling (This is the first time I've called an id tag in an online source document. I usually just settle for the page name.) Last edited by condor; 04-05-2011 at 07:08 PM.

04-05-2011, 08:35 PM	#6
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	I was using Code: <body style="width:400px;"> and it properly restricted the text to 400 pixels wide. but the browser still does the scroll bar across the bottom of the screen and lets you slide the text off the screen. The browser seems to allow wide screens. It seems reasonable for viewing web pages. But it allows an XHTML document to scroll text off the screen. I was watching the scroll bar as I zoomed in and out. It works really well. It just isn't doing what I want.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Converting multiple text files to xhtml?	Spotnik	Sigil	19	04-12-2011 10:37 PM
Merge multiple XHTML files at once	gmw	Sigil	1	12-28-2010 02:35 AM
I don’t want a page break between different xhtml files	Sergi	ePub	3	09-16-2010 02:09 PM
Manga / Comic files - Do they need to be formatted a certain way?	re838uk	Calibre	7	10-16-2009 10:32 AM
xhtml from epub	georger	ePub	8	10-13-2009 07:14 AM

04-05-2011, 07:30 AM	#2
RAH Guru Posts: 611 Karma: 575652 Join Date: Oct 2010 Location: Hampton, NH Device: Color Nook; Nook Touch	First off, there should be no difference using an external css file or inline. If you're thinking this may be the reason, it's just a red herring. Probably the reason you are having trouble is that the Nook uses its browser to read HTML, while it uses a completely different program (the epub reader) to read an epub. So it's no surprise that they work differently. Even though an epub file is just HTML embedded in a zip archive, an epub reader is not a browser and is customized for viewing on the small screen. So, it seems to me that you need to format your css and html to look good on your PC with your browser's window narrowed down to the approximate WIDTH of a Nook device. Once you have it looking good on your PC, when you transfer it over to the Nook and view it on the Nook's browser, it should still look good. The problem is that the Nook is sooooo narrow. Most web pages are not designed to be viewed at such a narrow width. My gut tells me that you would probably be best advised to make everything left justified, hugging the left margin, or maybe a few pixels off it. Then specigy a narrow width, etc.

04-06-2011, 07:46 AM	#7
RAH Guru Posts: 611 Karma: 575652 Join Date: Oct 2010 Location: Hampton, NH Device: Color Nook; Nook Touch	I am a little confused here. I thought you were trying to create an html file (file extension .htm or .html) that would look like an epub on the Nook. But in your latest post you are talking about ADE extensions. But from looking at the link you supplied, the ADE extensions are extensions to EPUB. Therefore the extension for a file of that type should be .epub, right? And if it is .epub, the Nook will open it in its epub reader and probably have no trouble. Are you trying to create your own epub from scratch (without using a tool such as Calibre or Sigil)? If so, from what I have read it is doable, if you browse this forum. If this is not what you are trying to do, why not just use Calibre and Sigil and produce an epub?

04-06-2011, 06:11 PM	#8
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	Sorry about the confusion I caused. The diversion into epub topics was to find out why an epub works on the screen and how it could be applied to xhtml. But it looks like the epub reader is told what size the screen is, and it confines whatever it displays to that screen area. The html browser seems to vary the size of the screen along with the size of the text. I haven't yet found a way to convince it NOT to vary the size of the screen.

04-07-2011, 07:40 AM	#9
RAH Guru Posts: 611 Karma: 575652 Join Date: Oct 2010 Location: Hampton, NH Device: Color Nook; Nook Touch	OK, I understand now. One thing you could try - go to a website that recognizes a mobile device - for example, weather.com . If you have a color nook set to mobile mode, the webpage fits the screen very nicely, with no scroll bars. If you could get a look at the html on such a site, you might be able to get an idea of how they do it. Trouble is, of course, how are you going to do that? Seems like you'd have to use your PC browser and do a View>Source and hope that the code for the mobile version of the webpage is in the code for the non-mobile version (i.e. via javascript or just different class usage). If it loads another page when it detects a mobile device, I'm not sure how you could look at the code for that other page, unless you could set your PC browser to mobile mode just for testing and viewing the source. Obviously I haven't looked into this, but it sounds like it might be fun.

04-18-2011, 10:18 AM	#10
RAH Guru Posts: 611 Karma: 575652 Join Date: Oct 2010 Location: Hampton, NH Device: Color Nook; Nook Touch	I've been looking into this area a little more, and one thing I found is a CSS feature called CSS Media types - specifically the type "@media handheld". Do a Google search on "CSS @media" and you'll find a ton of info. Looks like one way to do what you want.

04-22-2011, 12:10 PM	#11
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	Thanks for the info. There certainly are a lot of results for that search. One of the difficulties is that the goal of modern XHTML page design is to be flexible, while I'm approaching this from the opposite direction of trying to force a specific page width. (with a possible second width for landscape mode) I'm not very experienced with XHTML/CSS but have tried anything that I could find. I'm still unable to force the page to stay a specific width in pixels. I can set the page width, but the Nook Color zooms in on the whole page rather than just changing the text size, which exceeds the original page width. I also understand that the Nook Color does not support javascript, so any method that uses javascript to test screen size is out. With epubs, the ADE software keeps the screen size fixed no matter what magnification you use. I'm not confident that I can find a way to enforce a screen size in XHTML. I'm starting to think that it would be easier to display XHTML documents as an epub, especially if it would be possible to easily create or edit the contents of an epub without too many steps.

04-25-2011, 07:45 PM	#12
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	I've given up on trying to use a browser to read HTML on the NC. Calibre makes it fairly easy to convert simple HTML and XHTML to an EPUB. Some users have noted problems with HTML tables, but narrow tables work fine. The downside is that if you want to edit the content of the EPUB, it seems that you need to delete it off the NC, edit the original HTML file on your PC and then convert the updated file to an EPUB again.

04-29-2011, 10:31 AM	#14
condor Member Posts: 21 Karma: 10 Join Date: Mar 2011 Device: Nook Color	Thanks for the tips. I'll have to try Sigil. I don't use rtf files, but do appreciate the information on converting them in case it comes up.

Advert

Advert