Importing css in html files

shotsky · 07-14-2012, 10:20 AM

I use Calibre from the command line, to convert html files that my software creates. I have many users that also use my software, so I place the .css file on my server, and link to it using the @import command:
<style type="text/css">

</style>

That lets everyone using my software use the same css file. However, Calibre balks at the @import line, and won't produce an ebook. If I simply remove that line, it does create an ebook. (type unimportant)

I know the html is properly formed, and it is inside comment tags, so I suspect that Calibre doesn't recognize it.

My request:
If not recognized, could it simply skip the line and proceed? Shouldn't it just skip comments anyway?

My preference:
Recognize the command and USE the css to make the ebook.
Here is a link to one of the files that my software creates:
http://recipetools.gotdns.com/mags/CI/117/CI-117.html
If you do 'view source' on that page, you will see the import css command, and you can see that it is used to format that web page.

Thanks,
John

kovidgoyal · 07-14-2012, 01:09 PM

That html file is full of errors. Run it through the w3c validation service to see just a few of them (it's so full of error that the validator actually fails to parse it at all). In any case if you want to link a stylesheet, dont use @import use the <link> tag.

shotsky · 07-14-2012, 01:32 PM

Yes, that was a poor choice for a file. The newer ones are all in html5 format now, and they validate.

Still, the link you mention won't work, since the css file is web based, not on users's computers. Anyone can look at those files on the web and will see the result of the css formatting the way it is done. The only other way to do this is to actually embed the .css file into each file, but that would be hugely wasteful, as the @Import command does essentially the same thing, only it is done in the users' browsers on the fly. Lastly, any change I make to the css file now, updates all existing files that use that css.

But the other part of my question is why should Calibre just fail to create an ebook, even if it doesn't use that css? Can't it just bypass the @Import command, especially since it's already 'hidden' in a comment?
Thanks,
John

kovidgoyal · 07-14-2012, 03:44 PM

Code:

<link href="http://recipetools.gotdns.com/css/recipeclips.css" rel="stylesheet">

shotsky · 07-14-2012, 04:00 PM

That doesn't work, at least not in IE. I spent a lot of time researching this to make it work with all browsers correctly, and that was the only way that was reliable.

That's ok, I made a workaround by copying my html file to a new file, removing that statement, and sending that to Calibre. Then it is deleted. It does mean that others can't use my web pages to make their own ebooks, but I guess that's ok.
Thanks,
John

Serpentine · 07-14-2012, 05:09 PM

I fixed up the validation, swapped the header to :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
		<title>RecipeClips Cookbook</title>
		<link rel='stylesheet' href='http://recipetools.gotdns.com/css/recipeclips.css' type='text/css'/>
	</head>

And IE was quite happy with the CSS.

Chances are higher that the broken xml later on was making IE fall back into some strange quirks mode which made it seem to not work. But yeah, using @import isnt a great idea in the first place.

shotsky · 07-14-2012, 05:34 PM

Nice, that does work. The code page change caused it to not display correctly in Chrome and FF, but I changed it back and all seems to be good now. I also tried it in the newer html5 pages, (which do validate) and it continues to work.

Thanks for the assistance, it's nice to see simpler solutions.
Much appreciated,
John

07-14-2012, 10:20 AM	#1
shotsky Enthusiast Posts: 39 Karma: 10 Join Date: Jul 2012 Device: none	Importing css in html files I use Calibre from the command line, to convert html files that my software creates. I have many users that also use my software, so I place the .css file on my server, and link to it using the @import command: <style type="text/css"> <!-- @import url(http://recipetools.gotdns.com/css/recipeclips.css); --> </style> That lets everyone using my software use the same css file. However, Calibre balks at the @import line, and won't produce an ebook. If I simply remove that line, it does create an ebook. (type unimportant) I know the html is properly formed, and it is inside comment tags, so I suspect that Calibre doesn't recognize it. My request: If not recognized, could it simply skip the line and proceed? Shouldn't it just skip comments anyway? My preference: Recognize the command and USE the css to make the ebook. Here is a link to one of the files that my software creates: http://recipetools.gotdns.com/mags/CI/117/CI-117.html If you do 'view source' on that page, you will see the import css command, and you can see that it is used to format that web page. Thanks, John

07-14-2012, 01:32 PM	#3
shotsky Enthusiast Posts: 39 Karma: 10 Join Date: Jul 2012 Device: none	Bad html Yes, that was a poor choice for a file. The newer ones are all in html5 format now, and they validate. Still, the link you mention won't work, since the css file is web based, not on users's computers. Anyone can look at those files on the web and will see the result of the css formatting the way it is done. The only other way to do this is to actually embed the .css file into each file, but that would be hugely wasteful, as the @Import command does essentially the same thing, only it is done in the users' browsers on the fly. Lastly, any change I make to the css file now, updates all existing files that use that css. But the other part of my question is why should Calibre just fail to create an ebook, even if it doesn't use that css? Can't it just bypass the @Import command, especially since it's already 'hidden' in a comment? Thanks, John

07-14-2012, 03:44 PM	#4
kovidgoyal creator of calibre Posts: 43,842 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Code: <link href="http://recipetools.gotdns.com/css/recipeclips.css" rel="stylesheet">

07-14-2012, 05:09 PM	#6
Serpentine Evangelist Posts: 416 Karma: 1045911 Join Date: Sep 2011 Location: Cape Town, South Africa Device: Kindle 3	I fixed up the validation, swapped the header to : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <title>RecipeClips Cookbook</title> <link rel='stylesheet' href='http://recipetools.gotdns.com/css/recipeclips.css' type='text/css'/> </head> And IE was quite happy with the CSS. Chances are higher that the broken xml later on was making IE fall back into some strange quirks mode which made it seem to not work. But yeah, using @import isnt a great idea in the first place.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fixed Layout Sample ".mobi" file with package(html, css, opf, ncx files).	Sushil	Kindle Fire	1	01-13-2012 07:16 AM
Importing more files from HTML folder.	sol_barbez	Sigil	2	02-25-2011 10:02 AM
Importing HTML Files	Shadowlane	Calibre	1	12-19-2009 03:04 PM
Calibre 0.6.15-16 importing html files as zips	BKeeper	Calibre	2	10-02-2009 03:29 AM
Help! Newbie having problems converting HTML/CSS files	jackie_w	Calibre	6	09-14-2009 04:53 PM

07-14-2012, 01:09 PM	#2
kovidgoyal creator of calibre Posts: 43,842 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	That html file is full of errors. Run it through the w3c validation service to see just a few of them (it's so full of error that the validator actually fails to parse it at all). In any case if you want to link a stylesheet, dont use @import use the <link> tag.

07-14-2012, 04:00 PM	#5
shotsky Enthusiast Posts: 39 Karma: 10 Join Date: Jul 2012 Device: none	That doesn't work, at least not in IE. I spent a lot of time researching this to make it work with all browsers correctly, and that was the only way that was reliable. That's ok, I made a workaround by copying my html file to a new file, removing that statement, and sending that to Calibre. Then it is deleted. It does mean that others can't use my web pages to make their own ebooks, but I guess that's ok. Thanks, John

07-14-2012, 05:34 PM	#7
shotsky Enthusiast Posts: 39 Karma: 10 Join Date: Jul 2012 Device: none	Nice, that does work. The code page change caused it to not display correctly in Chrome and FF, but I changed it back and all seems to be good now. I also tried it in the newer html5 pages, (which do validate) and it continues to work. Thanks for the assistance, it's nice to see simpler solutions. Much appreciated, John

Advert

Advert