Log in / Register

Forum › Bugs

XHTML document not rendered well

ajacobson
Hello,

I just discovered Prince, it is amazingly better and fast at converting webpages to PDF than any browser so far. However I have a problem with one document. I use some CSS rules to hide some content depending on the selected language (there is a French and an English block). It works well in all the browsers I have tested so far (even with Javascript disabled).

However, in Prince, the content of the English block is added after the end of the French block, adding 5 more pages to the resulting output. This is not a big deal, but it would be great if it could be fixed.

By the way, a way to specify/exclude which pages to export to PDF would be great ! Also, excluding the hidden elements from the PDF table of content would be awesome.

Problematic document is attached. You can compare the Prince PDF output with the expected output using any browser with Javascript disabled.

Thank you for your great software.
  1. resume.zip‎ 222.7 kB ‎
    My resume in XHTML format
jim_albright
Is making 2 files an option?

Jim Albright
Wycliffe Bible Translators

mikeday
That is really horrible markup. You are hiding the English text at the bottom with this rule:
.allcontent {
    height: 355em;
    overflow: hidden;
}

Instead of something nice and simple, like applying "display: none" to #contenten and "display: block" to #contentfr. Since this rule is in a @media screen section, Prince won't apply it unless you specify --media=screen on the command-line, as it defaults to --media=print. But I would strongly encourage you to select the element by id and not hide it by clipping it away! :)
ajacobson
Thank you for fast replies and also for the "horrible" markup. I am curious to know what makes you say it is horrible, this markup is entirely valid and more, it tries to be semantically correct.

Making two files is not an option as this file is aimed to be easily distributed via email.

I am not using display:none and display: block to hide and show #contenten and #contentfr when Javascript is disabled for the single reason that there is no other ways to show and hide a block using only CSS by clicking a link, unless you show me how. An alternative solution would be to not hide the English content, as this is the solution used by the W3 validator tabs.

However, when Javascript is activated, I just switch the classes of #contenten and #contentfr to the .hide and .show classes which use diplay:none and display:block as you advice.

As for the media remark, Firefox is handling it nicely (but maybe incorrectly if we strictly follow the CSS recommendations, but I am not an expert in this domain). However showing and hiding the English and French block is done in a shared CSS section applying to both Screen and Print medias, so I still think there is a problem in Prince.
mikeday
Sorry, the markup isn't really horrible, perhaps it would be more accurate to say that the styling to make it work without JavaScript is a clever hack. :)

I think that showing the English content as well if JavaScript is disabled might be slightly more friendly, and less likely to break if the height of the content ends up being different to what you expected, causing strange clipping effects.

Another option is to use the CSS3 :target selector, which allows you to implement this kind of interactivity entirely in CSS with no scripts. The only problem is that it is difficult (impossible?) to make the text display when neither link is clicked. Here is an example:
<html>
<head>
<style>
div { display: none }
div:target { display: block }
</style>
</head>
<body>
<a href="#fr">French</a>
<a href="#en">English</a>
<div id="fr">French text goes here!</div>
<div id="en">English text goes here!</div>
</body>
</html>

Another issue is that this probably won't work in older versions of Internet Explorer.

However, for Prince interactivity isn't an issue, as you only want to create a PDF with either the French or English text. (Or both). The easiest way to do that is just to use "display: none" in a @media print rule.
ajacobson
mikeday wrote:
I think that showing the English content as well if JavaScript is disabled might be slightly more friendly, and less likely to break if the height of the content ends up being different to what you expected, causing strange clipping effects.

Sure, I will consider this solution, as it would be more accessible and cause less hassle to manage.

mikeday wrote:
Another option is to use the CSS3 :target selector, which allows you to implement this kind of interactivity entirely in CSS with no scripts. The only problem is that it is difficult (impossible?) to make the text display when neither link is clicked. Here is an example:
<html>
<head>
<style>
div { display: none }
div:target { display: block }
</style>
</head>
<body>
<a href="#fr">French</a>
<a href="#en">English</a>
<div id="fr">French text goes here!</div>
<div id="en">English text goes here!</div>
</body>
</html>

Another issue is that this probably won't work in older versions of Internet Explorer.

I already tried that : as you said, as soon as the links are not clicked, the content is not displayed, which is quite frustrating :)

mikeday wrote:
However, for Prince interactivity isn't an issue, as you only want to create a PDF with either the French or English text. (Or both). The easiest way to do that is just to use "display: none" in a @media print rule.

I think that is a clever solution. I will make two stylesheets, one for English and one for French, so that I can convert my resume in Prince. Thank you for your support :)