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.
Related
I have a website and need to transport a form to another website. I however only need certain tags not the whole form block with all it's tables and divs.
When selecting a html-tag in inspector, I can copy inner HTML, outer HTML or CSS styles but how can I just copy that very exact tag I selected without it's child nodes, just the selected line in HTML code?
I ask this because the HTML is minified and I can't just select and copy a tag in source. Same when I chose "copy outer HTML" I get the whole HTML subtree minified, means everything in one line.
How can I quickly search and copy certain tags from the three without grabbing everything in the branch?
Edit: People, thanks for all your suggestions but please note that I wrote about a MINIFIED HTML page I have here.
Just open Debugger near Inspector
Then find page file... then copy with any select range as you want
UPDATE
if it minify click here
If I understood what you want try this
Since your question seems unsolved yet, let me come up with a creative approach I use for similar tasks from time to time:
(1) Creative solution: Page manipulation
If you don't have a javascript framework of your choice (e.g. jQuery) on that page, add it using a browser-extension that adds it when page has loaded.
Then you write a bit of javascript code that removes unwanted child elements of the desired parents in a loop or so. That sounds like lots of work but since you asked this question I assume you need dozens if not hundreds of elements so it might be worth taking the time to write such loop(s).
When the code you injected processed the page and removed everything you don't want, you can then copy the code like mentioned by others here.
(2) Alternative solution: Beautify the code beforhand
If the given solution(s) don't work for you, one could try to beautify the code by copying the source to a webpage that auto-indends html/js code. You could then optionally save it into a html-file and approach that one again like mentioned here before.
Sidenote
If either this idea is too much work or you need this frequently you are probably approaching this on the wrong side. When working on frontend (only) you are always limited to what you have. If you could approach from the backend you could then build from the data/information whatever you need. If you could provide a bit more information about why you need this and how much code you are talking about one could maybe come up with a more sustainable solution!
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.
I don't have direct Host or Superuser access to DNN and the way our system is set up I wont get access to those accounts. It is a policy where i work. Is there ANY way to get your HMTL/CSS to actually work as you put it into the DNN HMTL editor? I have tried adding things like an accordion sidebar, tabbed area, and a simple CSS image hover. DNN takes my code and jumbles it up so that it does not work correctly. I have taken markup straight from my text editor, into dnn (that was working fine in the browsers before i took it into DNN) and it shows up, but does not act like it should or the code gets jumbled and breaks and I spend an hour trying to fix it EVERY TIME.
Has anyone out there had the same issue, or any suggestions, tricks to get your markup to work correctly in DNN.
Thanks,
Yes and no, you can't add scripts in the html editor and if you are copy-pasting something that has a FORM element, it won't directly work without modification.
One possible way to keep your javascript working is to move it to the Header or Footer options in the module options of that module instead of the content.
As for if your code contains a FORM element, you can use javascript to modify the Asp.NET FORM element to suit your need, see http://dotnetnuke.bz/Articles/tabid/156/DotNetNuke/98/How-to-Include-Multiple-Forms-in-DotNetNuke.aspx for more details.
I'm having a Chrome only issue when adding anchor tags for internal links inside an HTML widget. This may sound quite unimportant but it's quite annoying for myself and many users.
When a page is loaded, if the links are middle-clicked or Ctrl-clicked the 1st time, they only open in a new tab/window like they should, but the 2nd time they act as though they were left clicked and use the same tab/window. For some reason this problem doesn't happen when I use Hyperlink or Anchor widgets. It also isn't an issue in Firefox or IE8.
I've verified that the final HTML of the Hyperlinks and my manually scripted tags are exactly the same. I applied the same styles to the HTML widget to do this. I even tried creating a Hyperlink and calling toString() to generate the HTML, but the bug still occurs.
Does anybody know why this could be happening or have any ideas of how to remedy it? This is a situation where I can't use Widgets so I need to create the tag HTML manually. I'm not a GWT expert, but I don't understand how the compiled code be handling the Hyperlink and Anchor widgets differently than the ones inside the HTML widgets. Any incite into this could be helpful.
I'd be interested in knowing if anybody else could reproduce this as well. I'm running Chrome 23.0.1271.97 and GWT-2.5.0. I know this happens in older versions of Chrome and GWT because it's been a problem for a while, at least since GWT-2.4.
Uninteresting nuances:
If there are two different links inside the same HTML, they bug will happen independently. Meaning that you can middle-click each one, and they will both work correctly, just not the 2nd time. Refreshing the page also resets them so the bug won't happen on the next middle-click. I also found that if the same link is twice contained in the HTML widget, they actually wont work independently. Meaning middle-clicking one will cause the other to incorrectly handle it's 1st middle click.
Just finished debugging this. It is not a GWT issue but a Chrome issue.
I created a bug report: http://code.google.com/p/chromium/issues/detail?id=177502
You can reproduce using this simple HTML page:<!DOCTYPE html>
LOCAL
I have a report I need to print out in an application I'm usually doing maintenance for. My question, which interests me beyond the scope of this task is, what are the ways to format an HTML page for printing? What are the pros and cons of each?
Note that the page is meant only to be printed. I'm not asking about an HTML page that looks ok also when printed.
Generally speaking, I know I can either rely heavily on <table>s or on <div>s, but I don't know which way to go.
I would also appreciate some resources to get me started, or to help with known problems, in any method you suggest.
Thanks,
Asaf
As you can certainly see, printing and web presentation are two different creatures. The main issue is the bounds of the printed page, which does not exist in a web page. Even if you think you have a page laid out in a manner that will fit a printed page, then you need to deal with the fact that the font you are using may not work or scale correctly on the user's printer.
I know of three ways to deal with this issue:
Use fixed-sized fonts (like Courier), limit yourself to an 80 column width, and only use font characters: meaning use something like asterisks for borders, etc. This is VERY old school - your reports look simple and old and plain. But, they will always print they way you intended.
Convert your report to an image. Images can be made to confirm to a specific size which can fit on a page. However, you can still have issues due to printer margin settings.
Let another application do the work for you. What I mean by this is put your report into a PDF or a spreadsheet. Both PHP and Perl have easy to use modules for creating a PDF - with no licensing needed. Perl has a fantastic spreadsheet module. This route takes a little learning up front, but frees you from having to be an expert on printing (which can be a real pain).
In case you DO want to have a page that also looks good when viewed in a browser, consider multiple stylesheets for different medias.