I am working on a html to PDF project. I am following the solution from an older SO question, but got stuck on the first step which is:
h1 {
string-set: doctitle content();
}
#page {
size: A4;
margin: 1.6cm .6cm 1.2cm .6cm;
#top-center {
content: string(doctitle);
}
}
but I'm getting a "Unknown property name" on the Dev tools.
Tried on: Chrome version 81.0.4044.129 & Firefox 75.0
So after researching a ton more, I think I have the answers. string-set is an actual CSS property in W3's CSS Page Media Module but like the OP in Has the paged media module been abandoned?, there does not seem to be a full adoption in browsers for paged media module specs even though caniuse says it's fully supported.
The reason it works in Re-displaying the current heading after a page break is because the OP uses WeasyPrint, which does not rely on the browser's CSS rendering to create the PDF.
The takeaway is that in 2020, HTML to PDF is still a massive pain because of fragmented adoption of W3's specs. The same HTML file will look different in the browser's print preview, WKHTMLTOPDF and WeasyPrint.
Some of the reading that helped me finally solve this:
https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
Related
I have used Joomla 3.3 ("tk_responsi_free" template) to build my website. But when I am trying to view it in IE7 the sub menu section getting suppressed by other modules. So I have added little bit of CSS code in "custom.css":
#header {
z-index: 999;
}
This solved my problem in IE7. But now I am not able to view the contents which were written under Header tag in IE6. I have removed the above CSS code and also used conditional statement. But the problem remains.
Thanks in advance.
IE6, a browser from pre-history, can't parse html5 tags. Are you even loading an html5shiv? Without it IE6 doesn't even know the header tag is there. Pretty sure your template will not support IE6, so if you want IE6 support a free responsive template is not the best choice.
Expecting that is like expecting a transistor radio to play a Blu-ray disc. As far as IE6 is concerned html5 doesn't exist, neither does css3.
I am trying to make a website for my family's B&B and I don't have much experience with web coding.
This is a website template I bought from the internet, and I didn't have that many difficulties with it until now where I find myself completely stuck to a point where the contents of a specific webpage of the website are not displayed correctly across Chrome Firefox and Internet Explorer, mostly the problem is with IE since the viewing issues between Firefox and Chrome are close to none.
I was told on IRC that this is caused by the CSS not being read correctly from the browsers and that every browsers tend to view pages differently, and therefore I should create a specific css style for IE in order to address this compatibility issue.
Unfortunately though I haven't been able to find out what is causing the issue.
The "container" where those contents (just pictures and texts) are located in the page is called grid_11 and belongs to the grid.css file located in the css folder.
I tried to play with margin, something like
.container_24 .grid_11 {
width:430px;
margin-left: 40px
}
but the result is that the box containing all the contents moves throughout the page along with them.
Here I am at attaching the screenshots of how the page is displayed across the three browsers.
http://imgur.com/mgDYbD3,bZC3wHI,yd6BX8t
And here's the html code alongside with the css http://jsfiddle.net/r5QHW/
This is really getting above my pay grade now. I'd truly appreciate if someone could help me out with it.
Thanks,
Pietro
The question you want answered is one of the below... good luck!
Where is there a list of css property support by browser?
W3schools has lots of ads but is a good resource.
The CSS property support table: http://www.w3schools.com/cssref/css3_browsersupport.asp
The list of all references on their site: http://www.w3schools.com/sitemap/sitemap_references.asp
How do I debug code in a specific browser?
What you want is the Developer Tools. You actually open the page in the browser you're evaluating and then follow the instructions for each browser's developer tools to figure out what broke.
Chrome: https://developer.chrome.com/devtools/index
Firefox: https://developer.mozilla.org/en-US/docs/Tools
IE: http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx
Is there any other way to achive this requirement.
I am using filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3); to rotate the page which works but if the content is long which does not print the pages properly.
Use a Print CSS. In your CSS you can set the #page property as shown below.
#media print{#page {size: landscape}}
The #page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is #Page { size:landscape} obsolete?:
CSS 2.1 no longer specifies the size attribute. The current working
draft for CSS3 Paged Media module does specify it (but this is not
standard or accepted).
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
<link media="print" rel="Alternate" href="print.pdf">
In conclusion in some browsers it is relativity easy using the #page size option however in many browsers there is no sure way and it would depend on your content and environment.
This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.
I've been using the script
#page {
size:A4 landscape;
}
but it only works in the Chrome browser. How to print landscape automatically with a Mozilla browser ??
Unfortunately, last I recall hearing is that the #page rule in CSS has been cut down in scope. (If anyone knows otherwise, please correct me)
If you need to have your PHP page print reliably in Mozilla (and all other browsers), what about using server-side PDF generation? The functions in PHP to support this can be found at http://www.php.net/pdf
Firefox does not support the CSS3 Module: Paged Media. If you want to have a document thats looks the same on every printer use a PDF, since you have no control over custom extensions and user defined stylesheets.
You could try something like
#media print {
html { width:29.7cm;height:21cm;}
body{margin:3cm;}
}
but we all know about the inconsistent browser handling of the #media rules :/.
I'm trying to figure out which browsers currently (natively) support the CSS3 layout module.
Basically, I'm developing for a specific environment where I can specify what browsers to use, and CSS3 will speed up development times, so hey - why not?
What I'm specifically talking about is
body {
display: 'aaa'
'bcd';
}
and being able to slot page elements into the layout like so:
div#div1 { position: a; }
div#div2 { position: b; }
(div1 is the header, and div2 is a left sidebar)
Opera has the best CSS3 support, followed by webkit (safari). I suggest testing on Opera to see what works.
Here's a compatibility chart (may be out of date)
http://geocities.com/seanmhall2003/css3/compat.html
this one seems better: http://westciv.com/iphonetests/
Be aware that most css3 properties are supported through a prefix (since css3 isn't final). For opera the prefix is -o- and for webkit it is -webkit-. ie: -o-text-shadow.
UPDATE: There is a Javascript implementation of the layout module: http://a.deveria.com/csstpl/ . Have not used it myself and it comes with the catch that you must wait for all the page to load before it can render cleanly. If you're writing an intranet application on a LAN this would probably have a negligible impact but on a slow connection that could make your pages appear unresponsive.
I'm pretty sure no browsers currently implement it. And I wouldn't expect any browser to implement it any time soon either.
It just isn't mature enough yet. It's only a working draft and will still need a lot of attention and discussion before it's going to turn into anything browser implementors will start having a go at. For example, there are (at least) 2 related proposals: Grid Positioning and Matrix Layout.
It is on Mozilla's bug tracker, but for the moment that's little more than a placeholder for future attention. I couldn't find any mention of it at all on the Webkit bug tracker.
If you want to find out more about the ongoing status of these layout modules, you should follow the www-style mailing list.