[SOLVED] html rendering differently in Calibre than with browser.

rblampain · 05-09-2019, 11:25 AM

I am converting an HTML page for ebook reader.
Problem 1: a local link must follow a <h1></h1> tags in an ebook to render correctly (render from the heading in the window) with Calibre but the PC browser misses the heading when linking with the same code, I suppose this is correct but is it? Or is there something I missed? (Code is correct according to W3C validator which is quiet happy linking either way).

Problem 2: the ebook reader displays in its (compulsory) TOC a few hundreds local/relative links in the order they are called when they are included at the end of the HTML page in alphabetical order, is there a way to change that behaviour as it makes the generated TOC unusable? Given my little experience in either, I am tempted to think that the only way would be to make some sort of dummy links in alpha order before they are really linked in the page but that is adding a fair bit of unwanted code and I am not sure it could work cleanly.

Problem 3: there is scant info regarding tags and their use for ebooks and what exists suggests to use Windows software (word? vilified by others)to get a result which is not explained from the HTML side. And the suggesting to use a LibreOffice extension Writer2Epub but I could no locate the download site.

Thank you for you help.

astrogeek · 05-09-2019, 08:07 PM

It is difficult enough to get HTML to render the same in two different browsers, so I would say it is not surprising that it renders differently in wholly different applications. The W3C validator only tests that the HTML is valid, but says little about how a given application may render it.

I have not written anything for an ereader and am certainly not knowledgable about them, but I think that you would do better to write a version for the reader which works well with the reader, and another for the browser which works for the browser, and not beat yourself up trying to make one version work the same for both.

If you think otherwise, then please post a minimal example of markup which demonstrates a particular problem for a particular browser version and reader to help others understand the problem you are having.

ondoho · 05-11-2019, 04:36 AM

you're not even telling us which ebook format this is about.
epub?
maybe this can help.

rblampain · 05-13-2019, 03:11 AM

Yes it is epub.

astrogeek answer seems to indicate that what I had wrong was that both would be rendered on the same PC by the same software. If that is not the case then I obviously need 2 versions.

astrogeek · 05-13-2019, 12:17 PM

Quote:

Originally Posted by rblampain

what I had wrong was that both would be rendered on the same PC by the same software. If that is not the case then I obviously need 2 versions.

Yes, each application handles its own rendering of the HTML, and they can be quite different on the same device!

You will surely need two versions for the case you described.

scasey · 05-13-2019, 12:18 PM

writer2epub download by putting "writer2epub download" in my favorite search engine.

rblampain · 06-09-2019, 05:52 AM

I have the following HTML code which renders as expected in the browser (Firefox), that is when clicked, the link pointed to within the <div ..></div> tags renders at the top of a new window as specified in the css file and is highlighted that way but the ebook reader (Calibre) only shows a new window in which the link (from over 200 of them) could be rendered anywhere and the CSS formatting is ignored necessitating to read the whole window to find it.

I have only basic knowledge on the subject, I understand the browser considers the link as part of the <div></div> block and the link inherits the css formatting of the <div>, if this is correct, how can I accomplish the same result with the ebook reader?
Else, I am missing something, what is it?

If the CSS inherit keyword is the answer, I could not figure how to use it.

Thank you for your help.

HTML code

Code:

<div class="quote">
"Government today is growing too strong to be safe. There are ..."
<br>
<a href="#H.L._Mencken">H.L. Mencken</a>
</div>
..
..
..
<p id="H.L._Mencken">
September 12, 1880 - January 29, 1956<br>
Was an American journalist, satirist, cultural critic and scholar of American English.
</p>

CSS code (in CSS file)

Code:

p {
page-break-inside: avoid;
}
.quote {
page-break-inside: avoid;
background-color: silver;
text-align: center;
}

astrogeek · 06-09-2019, 12:50 PM

You have opened multiple threads recently on the same topic - HTML/CSS rendering in Browser vs ereader.

This newest question thread has been merged with the previous most recent thread provide continuity for those offering help.

To help everyone maintain the continuity and avoid duplication of effort please post related questions to this thread in future.

rblampain · 06-09-2019, 10:07 PM

Although the problems have similarities, my first question was under the false impression that the result should have been the same in both case.
However my second question, which you moved, only shows what I am trying to do under the browser because it seems logical to me to get it working under the browser first and then make another version for the book reader. But my second question clearly explains that I could not find how to make it work for the book reader and I think your mixing the two is erroneous and confusing for anyone reading.
It also seems to me that the intention is more to avoid the question been left unanswered (bad image for LQ) because of the complexity of the problem.
As a moderator I am sure that you are aware that simply adding one comment to an original question reduces considerably the probability of having answers. The merging you have done will simply kill that question.
Cumulating further questions relating to ebook reader and HTML to this same thread also seems bizarre to me.

astrogeek · 06-10-2019, 02:23 AM

Quote:

Originally Posted by rblampain

Although the problems have similarities, my first question was under the false impression that the result should have been the same in both case.
However my second question, which you moved, only shows what I am trying to do under the browser because it seems logical to me to get it working under the browser first and then make another version for the book reader. But my second question clearly explains that I could not find how to make it work for the book reader and I think your mixing the two is erroneous and confusing for anyone reading.

I have spent some time re-reading your previous threads and these to consider whether to separate them, but I still think that collecting such closely related, overlapping questions on the same project and problem is best for yourself and for others, and most consistent with the site posting guidelines.

I assure you that the only intention is to help you receive the best help, and at the same time make it as easy as possible for those who volunteer time to offer help to be able to follow the development of your problem, previously suggested solutions and other relevant discussion. This is also very helpful to future visitors seeking help for similar problems, making useful information much more accessible.

If you feel strongly otherwise please use the Report button at bottom of your post to ask for others to review that decision.

Quote:

Originally Posted by rblampain

It also seems to me that the intention is more to avoid the question been left unanswered (bad image for LQ) because of the complexity of the problem.
As a moderator I am sure that you are aware that simply adding one comment to an original question reduces considerably the probability of having answers. The merging you have done will simply kill that question.
Cumulating further questions relating to ebook reader and HTML to this same thread also seems bizarre to me.

I am sorry you feel that way and hope you will reconsider.

I know little about ereaders generally, and nothing about Calibre specifically, but I see nothing obvious in the HTML or CSS example posted which would cause the target text to actually align to the top of the page.

For browser HTML I would use a named anchor tag as the target and see if the ereaders did not respect that as well, instead of trying to do it with CSS. Something like this...

Quote:

Originally Posted by rblampain

HTML code

Code:

<div class="quote">
"Government today is growing too strong to be safe. There are ..."
<br>
<a href="#H.L._Mencken">H.L. Mencken</a>
</div>
..
..
..
<a name="H.L._Mencken"/>
<p id="H.L._Mencken">
September 12, 1880 - January 29, 1956<br>
Was an American journalist, satirist, cultural critic and scholar of American English.
</p>

rblampain · 06-11-2019, 05:36 AM

Code:

<a name="H.L._Mencken"/>

Thank you for the tip, however it makes no difference. If my recollection is correct, it is deprecated.

dugan · 06-11-2019, 07:45 AM

You know you can add HTML files to Calibre, right?

Post a WHOLE HTML file (as small as possible but still large enough to demonstrate the problem) that we can a) just add to Calibre and b) open in Firefox so that we can actually see the problem. Obviously, the CSS will have to be inlined.

Post screenshots of each too, so that we know what you're seeing and what you're supposed to be looking for. Screenshots are especially helpful if we get different results, which obviously can happen.

astrogeek · 06-11-2019, 04:10 PM

Quote:

Originally Posted by rblampain

Code:

<a name="H.L._Mencken"/>

Thank you for the tip, however it makes no difference. If my recollection is correct, it is deprecated.

Thanks, I have not stayed current with various HTML specs since HTML4.0.1 and XHTML1.0. Indeed HTML5 and XHTML1.1 do not support the name attribute.

I then wondered what specific elements Calibre recognizes and found this:

Quote:

Calibre does not guarantee that an EPUB produced by it is valid. The only guarantee it makes is that if you feed it valid XHTML 1.1 + CSS 2.1 it will output a valid EPUB.

So that should be specific enough a target to hit. But even so, that only says it will be valid, not how a given reader will render it so variation is still expected apparently.

As Dugan has suggested, it would be very helpful if you could work up a minimal example which demonstrates the problem you are having, and the desired behavior. Having a complete, minimal example which others can use to quickly demonstrate the expected behavior and the incorrect behavior would go a very long way toward helping others help you.

dugan · 06-11-2019, 06:53 PM

Have you looked into whether or not Calibre is injecting its own CSS?

rblampain · 06-12-2019, 04:38 AM

Quote:

Have you looked into whether or not Calibre is injecting its own CSS?

I recollect reading on the Internet that it does although how is nowhere to be found - hence my hope that someone had experienced a similar problem and able to advise.

Here is the minimalist sample although I had to include enough linked contents to show the effect. It gives the same result. The file is EPUB.

Code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
p {
page-break-inside: avoid;
}
.quote {
page-break-inside: avoid;
background-color: silver !important;
text-align: center !important;
}
</style>
<title>Ereader testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
Some paragraph..
..
<div class="quote">"The belief that politics can be scientific .."<br><a href="#W._H._Auden">W. H. Auden</a></div>
More paragraphs..
..
<div class="quote">"A truth that's told with bad intent<br> beats all the lies you can invent."<br><a href="#William_Blake">William Blake</a></div>
..
..
<p id="Ugo_Betti">
Ugo Betti<br>
Ugo Betti<br>
4 February 1892, 9 June 1953<br>
Was an Italian judge, better known as an author, who is considered by many the greatest Italian playwright next to Pirandello.</p>

<p id="Ursula_K._Le_Guin">
Ursula K. Le Guin<br>
Ursula Kroeber Le Guin<br>
Born October 21, 1929<br>
Is an American author of novels, children's books, and short stories.</p>

<p id="Vaclav_Havel">
Václav Havel<br>
Václav Havel<br>
October 5, 1936 - December 18, 2011<br>
Was a Czech writer, philosopher, dissident, and statesman - first democratically elected president of Czechoslovakia in forty one years.</p>

<p id="Vince_Lombardi">
Vince Lombardi<br>
Vincent Thomas "Vince" Lombardi<br>
June 11, 1913 - September 3, 1970<br>
Was an American football player, coach and executive.</p>

<p id="Voltaire">
Voltaire<br>
François-Marie Arouet<br>
21 November 1694 - 30 May 1778<br>
Was a French writer, philosopher and playwright.</p>

<p id="Walter_Savage_Landor">
Walter Landor<br>
Walter Savage Landor<br>
January 30, 1775 - September 17, 1864<br>
Was an English writer and poet.</p>

<p id="Warren_E._Burger">
Warren E. Burger<br>
Warren Earl Burger<br>
September 17, 1907 - June 25, 1995<br>
Was a Chief Justice of the United States.</p>

<p id="W._H._Auden">
W. H. Auden<br>
Wystan Hugh Auden<br>
born in England February 21, 1907 died an American citizen September 29, 1973 in Vienna, Austria<br>
Was an Anglo-American poet.</p>

<p id="William_Beveridge">
William Beveridge<br>
William Henry Beveridge, 1st Baron Beveridge<br>
March 5, 1879 - March 16, 1963<br>
Was a British economist.</p>

<p id="William_Blake">
William Blake<br>
William Blake <br>
November 28, 1757 - August 12, 1827<br>
Was an English poet, painter and printmaker.</p>

<p id="William_Brown">
William Brown<br>
William Brown <br>
5 December 1881 - 17 May 1952<br>
Was a British psychologist and psychiatrist.</p>

<p id="William_Shakespeare">
William Shakespeare<br>
William Shakespeare<br>
April 1564 - April 23, 1616<br>
Was an English poet, playwright, dramatist and actor.</p>

<p id="William_Tecumseh_Sherman">
William Tecumseh Sherman<br>
William Tecumseh Sherman<br>
February 8, 1820 - February 14, 1891<br>
Was an American soldier, a General in the Union Army, businessman, educator and author.</p>

<p id="William_Wallace">
William Wallace<br>
Sir William Wallace<br>
April 3, 1270 August 23, 1305 "Hanged, drawn and quartered".<br>
Was a Scottish knight who became one of the main leaders during the First War of Scottish Independence.</p>

<p id="William_W._Purkey">
William W. Purkey<br>
William Watson Purkey<br>
Born August 22, 1929<br>
Is a writer and singer.</p>

<p id="Will_Rogers">
Will Rogers<br>
William Penn Adair "Will" Rogers<br>
November 4, 1879 - August 15, 1935<br>
Was a Cherokee cowboy, vaudeville performer, humorist, newspaper columnist, social commentator, stage and motion picture actor.</p>

<p id="Woodrow_Wilson">
Woodrow Wilson<br>
Thomas Woodrow Wilson<br>
December 28, 1856 - February 3, 1924<br>
Was the 28th President of the United States.</p>

<p id="W.P._Kinsella">
W. P. Kinsella<br>
William Patrick Kinsella<br>
Born May 25, 1935<br>
Is a Canadian novelist and short story writer.</p>
</body></html>