I'm trying hard to give full HTML header/footer printing capabilities to our Mediboard project.
Long term, I know that CSS3 Page Media module will fulfill my needs, but that's two or three years away at least.
So I tried to make it work with CSS2 capabilities, and it almost works as you can see on this printable document. Yet, I still have a limitation on the footer where the content prints under the footer (see pages 3-4 with Print Preview).
Though I'm pretty sure the padding-bottom of the div.body used to make it work in Firefox 2.
Anyway, does someone have a tricky clue to help me on that problem?
EDIT:
To give more details, we currently have headers and footers by using elements positioned with position: fixed, with top:0 or bottom:0 depending if it is a header or a footer. This works well, and when printing, these elements are repeated on each page at the right position (see the "printable document" example). The only problem is when a page break occurs, the text is drawn behind these elements (see page 3/4)
EDIT2: Updated the document's URL
It looks like CSS2 has a #page rule in which you can define your page size and a margin:
#page { size:8.5in 11in; margin: 6em 1em 2em }
-or-
#page { size:auto; margin: 6em 1em 2em }
Unfortunately I don't have time to test it, but I would love to know if it works. I could use that.
I like what you're planning with the header/footer. Good work :)
From my experience, page-break doesn't work within an element. If an element such as [p][/p] spans two printed pages, the HTML code isn't aware where the break happens between the pages. This is because the user may sets their own printer margins be they 1 or 1.75 inches or some other value. Actual printer margins cannot be set via CSS. CSS can only set the margins and padding to the HTML page -- to the "printer's" defined margins. No information about printer settings, such as margins, is sent to browser. This explains why content is being underwritten under the header since the browser has no idea when the page feed happened. The easiest solution is just to have the header information on the first page but, that's not what you want. The brute force approach is to insert page breaks [br style="page-break-before: always;" /] within the paragraph at the appropriate place but, this isn't practical for a large number of documents. Also, subtle differences between printers including those from the same manufacturer differ subtlely - for exanmple, one print may print the content just fitting on one page, the next printer may have the last line on the next page even though both printers have the same margin settings. However, for tabular information ([table][/table]) assigning such CSS becomes easy to keep tables together. I'm speculating that one could count characters on a page and dynamically insert page breaks via javascript (easy, if you used JQuery) to approximate the brute force approach.
You will want to implement media types most likely. Please see http://www.w3.org/TR/CSS2/media.html for more information. You can have one CSS sheet that does not have a floating footer for printing, and the other for the screen.
<LINK REL="stylesheet" TYPE="text/css"
MEDIA="print, handheld" HREF="foo.css">
That is an example.
You can also consider making the footer invisible on the printed page if you do not need it.
Related
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
Alright this is probably a newbie question but it is very much frustrating me. I clearly say in the style tags that the top blue bar needs to be snug against the top and the two side panels need to be snug against the sides.
Yet for some reason it has taken the liberty of inserting a blank white space around my html.
Here is the link: http://popularn.com/nate/error.html
See that white space on the left and at the top?
Even when I say top:0% and left:0%, it still doesn't work. It's like it's laughing at me and I've had enough. It's like it is starting the document at top:2% and left:2% and there's nothing I can do...
remove margin from the body, set top left to 0, and off course don't forget the position attribute
html,body{padding:0; margin:0;}
#someElement{position: absolute; top:0; left:0}
also -
putting position:absolute; top:0; left:0; to the body is like doing nothing
and the position of the #top_menu should be position: fixed and not fixes which has no meaning
Browsers have a set of default styles which are known as 'User-agent styles'. These are a generic set of CSS rules that it applies to elements. You know when you put a H1 in a page, and it appears big, and in bold? These are those styles.
The base elements in your pages are all styled with these UA rules. Body, HTML, div, etc - they all have a small amount of padding on them, which is where this is coming from.
Consequently, it's good practice to always use a CSS reset, when you are developing beyond basic styles. There's a couple of good ones I'd recommend. As CSS is hierarchical (hence cascading!) you need to include resets first.
Firstly is Eric Meyer's CSS reset. This applies generally to everything, and is invisible for most purposes. You include the file, everything gets reset to base.
Secondly is Yahoo UI 3 (YUI) reset, which takes a slightly different approach. They let you selectively apply a reset to different areas of a page by including a class. This is useful for some things, but for almost every small/medium sized project I'd recommend Eric's reset linked above - but it's useful for comparison and learning.
Instead of trying to tune out inconsistencies as you go along - using a CSS reset will give you a baseline for all elements which is the same on every browser. Believe me - you want this. When you get further into html, forms for example or fun stuff like that, then this kind of thing is an absolute life saver.
Hope that helps!
You need to reset the default padding and margin on any browser. I usually use this:
*{padding:0;margin:0;}
I've been setting up a very basic Wordpress site. All of the pages have a lot of empty space at the bottom. Pages with more placeholder content have more space at the bottom than the others.
I have been reading other threads from people with similar problems, and I can't fix the problem on my site using suggested fixes (the margin property in a certain div was often the culprit).
Check it out: http://www.hairofthedogproductions.co.nz/?page_id=5
My client wanted a totally minimal bare-bones site so I have collapsed post/page metadata, comments, and the sidebar. I just can't for the life of me get rid of the big empty space at the bottom.
Your main problem is in the comments template. I see you're using visibility: collapse to hide elements, but collapse is just for table elements, and if used in other tags it'll default to hidden. Plus, keep in mind that visibility: hidden hides elements but keeps them in flow. You might want to use display: none instead.
This will solve your problem, try it out.
#comments { display: none; }
Validate your page: http://validator.w3.org
I validated it and found about a dozen errors (some of them potentially serious enough to break the layout of the page, such as an unterminated tag).
When inspecting the source in Chrome, the element in the blank area was the HTML tag itself, which might indicate an overall failure to determine the correct document structure--the parser tries but can't always determine what you want it to do when there are malformed tags.
Just apply overflow:hidden on your main wrapper then it will remove all blank space at the bottom
#main {
overflow: hidden;
}
For an iPhone ebook application I need to break arbitrarily long HTML documents up into pages which fit exactly on one screen. If I simply use UIWebView for this, the bottom-most lines tend to get displayed only partly: the rest disappears off the edge of the view.
So I assume I would need to know how many complete lines (or characters) would be displayed by the UIWebView, given the source HTML, and then feed it exactly the right amount of data. This probably involves lots of calculation, and the user also needs to be able to change fonts and sizes.
I have no idea if this is even possible, although apps like Stanza take HTML (epub) files and paginate them nicely. It's a long time since I looked at JavaScript, would that be an option worth looking at?
Any suggestions very much appreciated!
update
So I've hit upon a possible solution, using JavaScript to annotate the DOM-tree with sizes and positions of each element. It should then be possible to restructure the tree (using built-in XSLT or JavaScript), cutting it up in pages which fit exactly on the screen.
Remaining problem here is that this always breaks the page on paragraph-boundaries, since there is no access to the text at a lower level than the P-element. Perhaps this can be remedied by parsing the text into words, encapsulating each word in a SPAN-tag, repeating the measurement procedure above, and then only displaying the SPAN elements that fit onto the screen, inserting the remaining ones at the front of the next page.
All this sounds rather complicated. Am I talking any sense? Is there a simpler way?
You should look at the PagedMedia CSS module: http://www.w3.org/TR/css3-page/
CSS3 also support multicolumn layouts (google for "css3-multicol". I don't have enough Karma to include a second link here :-)
About your update: how about doing the layout of one single page, then use a DIV with overflow:hidden for the text part. Next thing would be to overlay a transparent item on top of that, that would programmatically scroll the inner content of the DIV PAGE_HEIGHT pixels up or down according to some navigation controls (or gestures).
The other option is to have a parent <div> with multiple css3 columns: link1, link2.
This works on Android:
<style type='text/css'>
div {
width: 1024px; // calculated
-webkit-column-gap: 0px;
-webkit-column-width: 320px; // calculated
}
p {
text-align: justify;
padding:10px;
}
</style>
The CSS multicol suggestions are very interesting! However, and I hope it's ok to respond with another question: how would you go from splitting one or more long <p> elements into columns to having one particular of these columns being rendered in a WebView? The DOM hasn't changed, so you can't pick out an element and render it. What am I missing?
I was just recently asked to add a print stylesheet to a site I've coded out and am baffled as to why Firefox is mangling the output. A print preview of the following page reveals what I'm referring to:
http://webreviewportal.com/ethicalmovers/newsite/aaem-customer-testimonials.php
When you try to print that page in Firefox, you get the logo on one page, part of the testimonials on the second (they get cut off), and another blank third page. I've tested this with moderate success in IE and Safari with no such issues. Thoughts?
Also, why does the text get cut off (as opposed to wrapping) when you scale the page to anything above 150%? Thanks in advance!
If you add "overflow: visible" to #content in print.css, it prints correctly in Firefox. Your overflow is set to hidden in style.css, which is why the text is getting cut off on one page.
I've not really experimented with print stylesheets yet, having not had the necessity nor curiosity enough. However, looking at the W3C's page on paged media, reveals that page breaks may have to be explicitly stated or allowed:
This section describes page breaks in CSS 2.1. Five properties indicate where the user agent may or should break pages...
Taken from: http://www.w3.org/TR/CSS2/page.html#page-break-props, 2009-07-27, 18:13
So it may be worth adding in the page breaks, or disallowing the page-break between the testimonials and the logo, by adding:
#leftcol {
page-break-inside: auto; /* although this may be the default value, anyway */
}
I think I remember Eric Meyer having issues with this sort of thing because of the 'float' property; but since you've already stated float: none!important; I guess you've dealt with that.