I am trying to create a html page, that can be read on screen as well as printed on paper. The layout of the page is a bit advanced and uses e.g. flex.
I searched and tried several suggestions (page-break*, block sizing, ...) but could not get any useful breaking behavior working on Chrome 58.
Thus I am now asking here how to do a multi page html layout, where I can control which content will be shown on which page (preferably without having to restructure all content)? Target is current Chrome 58.
Bonus points if you post a fiddle that demonstates the structure.
EDIT:
I am using Emacs and impatient-mode to edit/show the html page.
The problem was actually Emacs httpd and impatient-mode. Using these breaks some parts of CSS Media queries. Turns out the HTML code worked all along on its own.
Related
Just done a new lightweight responsive html website in CSS Grid with a bit of flexbox - working perfectly.
Converted a test page (with a bit of everything in it) to AMP, validated in Google DevTools.
Woo-Hoo me thinks - until I look at the page in a couple of browsers.
Content all present but certainly not correct - all the 'grid-template-areas' jumbled up.
Removed all the AMP stuff and page displays perfectly.
Any comments please? Can't provide a link as the site is still local.
Thank you.
I'll try again but without the named 'grid-template-areas'.
Should have realised that it was going uncommonly well :-)
I am creating a graphic to be dynamically generated for a report for one of our clients. I have the rough layout and I am testing to see how it prints. However, when I go to print it/save to pdf (testing both), the stylized divs are not being displayed.
Html Generate Screen
Print/Pdf Page
CSS styling for printing is very limited. With more complex layout like yours, you're either better of converting it to an image or converting it to a PDF file. Choosing the best framework really depends on what back-end you're using. In Java I had most of luck using FlyingSaucer and in PHP html2pdf.
Also, this is good tutorial on what is possible using CSS styling for printing.
I'm trying to figure out where a browser, specifically firefox or chrome, would insert page breaks when printing or print previewing an HTML document. For now I do not want to avoid the breaks, nor do I want to define where exactly to put a break. I'm aware of the page-break-* elements as defined in CSS 2.1 and CSS 3.0. I really want to figure out the last element on the current page and the first element on the next page and relate them to the actual HTML code.
As far as I know there are no events or signals I could register for. The next thing I thought of is to patch webkit or gecko and add a custom signal/event. But this is only possible, if the page break code is not scattered over too many files and members.
I'm not asking for a complete solution, rather any thoughts or hints how this could be accomplished at all.
Thanks in advance for any suggestions and ideas :)
UPDATE: I need to figure out the position of the page breaks programmatically as I want to modify and manipulate the original HTML file depending on the result.
What exactly are you trying to achieve? You can style pages according to page breaks and whether the page is being printed using only CSS with media queries.
If CSS is not enough for your use case and patching the renderer is a suitable solution: on Gecko, you can grep nsCSSFrameConstructor.cpp for calls to AddPageBreakItem, and then figure out where it's inserting the breaks. A paginated nsPresContext means this is a frame for printing or print-preview. Look for calls to nsPresContext::IsPaginated and nsPresContext::IsRootPaginatedDocument.
I know it's easy to get the CSS that is applied to a single node in HTML, using tools like the Firebug extension for Firefox, etc.
But is there a way to see all the CSS that is in effect on an entire page, or a larger fragment of HTML?
Specifically, we are cleaning up our one extremely large CSS file into smaller modules and would like to find out what CSS is used on a certain page, so we can move all the non-used CSS to another module.
Thank you all! These are the various solutions I've looked at now from your recommendations (collected here for people with the same problem):
Dust-Me Selectors (Firefox Add-on)
This does exactly what I need. Lists used and unused CSS selectors (for the current page, or the entire site, after spidering), and can dump both lists as CSV text. Great.
https://addons.mozilla.org/firefox/addon/5392/
CSS Usage (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/10704/
WARI - Web Application Resource Inspector (Java tool)
Appears to only handle static code, not dynamically generated HTML as is present in most web applications that use ajax – which, unfortunately, makes it useless, at least for me
http://wari.konem.net/
CSS Redundancy Checker (Ruby script, requires Rubygems and Hpricot)
http://code.google.com/p/css-redundancy-checker/
TopStyle (Windows-only application, $79.95 (!!))
http://svanas.dynip.com/topstyle/
These are all cross-platform and free, except for TopStyle.
As far as tools go, you could use the css usage plugin for firebug. It will analyze pages for used css.
Or were you looking for a way to do it more programmaticly?
You can try Dust-Me Selectors, it's add-on for firefox, if you use firebug, as you stated, you may find useful CSS Usage.
I need a tool to compare the design of a website, I do not want to compare the HTML code only, but the output design.
Is this even possible? also is there any opensource program of this kind?
I have searched google, but I only get one candidate so far which is an HTML Match.
In modern webpages the appearance is controlled by various 'things': html code, css styles and images at least (also javascript in some pages). Simple text-based diff programs are not enough because their output can be irrelevant to the webpage appearance (i.e. cleaning up css can show many differences but the rendered webpage remains the same).
For simpler pages HTML Match mentioned above could do the job. If I have to compare the design of two "complex" pages (including layout, space, image and text changes) I would do a two-step approach:
Run a diff tool on the html sources to highlight the textual content differences. Then I would modify one of the pages to show the same content as the other (in order to make the next step more accurate and 'focused' to show 'real' layout changes). Of course it works only with very similar html.
Load the pages in the same web browser, get some screenshots from the rendered output at fixed positions and compare the images (i.e. with ImageMagick). It should show all visual differences in the rendered output.
It is not perfect but should work.
[UPDATE] HTML Match seems dead, see this answer for an alternative solution.
Solution: “compare web pages” tool. (“We've been doing it since 1999. It's free.”)
Example output (comparing pages for TP-Link USB hub model UH700 and UH720):
Under windows:
http://www.htmlmatch.com/
If you are using KDE, you can use Kompare or KDiff3.
However, if you want to view how your web page looks in different browsers in different operating systems, BrowserShots can used.
There are these online tools - that aren't brilliant:
http://www.w3.org/2007/10/htmldiff
http://www.aaronsw.com/2002/diff/
I like the look of daisydiff but have not used it in anger: http://code.google.com/p/daisydiff/
The keyword you're looking for is "diff".
A good program that can show you the differences between two files (html markup or other) would be ExamDiff for windows.
I'm working on one and i tell you it's hard and there is nothing on the market. Maybe Google and Bing have something inhouse. You can use some image comparison tools which identify rectangle regions of changed images. This is for example a part of all modern video compression but you have to do it for different regions of the webpage (the nav bar section, the main article, the region filtered by an ad-blocker etc.) as some of them may change and it's still considered the same content on the page.
As i said very complex problem with no exact solution.
The other is going the non visual way and just compare the resulting computed computer styles of each html element. You have to hack the browser to get access to the layout tree. There is also no official API or existing library/program/hack/patch for it.
You can make a visual comparison with Araxis Merge Pro by taking screen output with systems like BrowserStack, Cross Browser, PhantomJS