Using HTML/CSS for creating printable document - html

Is there a way to describe a printable document (A4 size for instance) using HTML/CSS ?
In HTML5 we have <header>, <footer>, and plenty of elements which can be used for building a document, but I wonder if I can output PDF documents where content is displayed using web technologies.
I try using media query #print in CSS in order to output a HTML file as PDF using my browser print box, but this solution is not so good in my point of view (displaying page number, or footnotes in footer).
Furthermore the render is not the same using different browser, and I want my documents to be all the same.

#print is the best solution:
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
See all posible solutions here:
Print <div id=printarea></div> only?
You will probably find what you need.

Related

Load a web page inside a html

Is it possible to insert a web page into a html file using iframe but showing the this "inserted page" at all browser ?
I need a solution to insert a html with a expansive way.
Your question is a little unclear but I will try my best to answer.
if you want the entire page to be taken up with this <iframe>, you will have two options:
Use jquery's $().load function and "load" your other website
$(function(){
$("body").load("http://yourWebPageHere");
});
Use plain <iframe> tags and use the css top: 0; bottom: 0; left: 0; right: 0; to make it extent to the edges. Note, do not use width: 100%; because that will leave a margin around the edges of the page.

Adding a space to a phone number with just CSS

I have a page which generates a phone number in HTML, like this:
<div class="phone">01987123456</div>
What I want is to simply put a space inside the number, like so:
01987 123456
The generated number and HTML will always be the same, but I only have access to client side code (HTML / CSS / Javascript / etc).
I want to find a way of achieving all of this without using Javascript if possible, so Ideally I am looking for an answer in CSS or HTML.
I'm pretty sure this could be done fairly easily in Javascript, but the client wants to make sure the phone number is formatted correctly even if Javascript is disabled (don't ask).
I want the most effective and efficient way of changing the number to what I want. If someone can figure out how to add brackets to the number (like this: (01987) 123456) as well as the space using just CSS/HTML you will immediately get marked as correct as well as my eternal gratitude.
EDIT:
I get that CSS is for design, Ive been a web developer for 15+ years. I could really do with a CSS hack to produce what I want, and explaining to the client the basics of web design is unfortunately not an option (they think they know better and I am in no position to dictate anything to them). I'm in a bit of a nightmare situation, and I need your help!
I know that content can be added to a page with CSS using content. I am aware of the ::first-letter method that #gillesc mentions in the comments. I was hoping something like this might help me.
The client uses modern browsers so a CSS3 solution would be fine.
And no, I cant change the outputted HTML.
I was interested to see if this could be done with CSS, even if it shouldn't be done! The following is quite hacky, ideally the phone number would be formatted server side or, if that isn't an option, with JavaScript.
A few caveats:
This requires an attribute to be added to .phone for the pseudo element to use. This may or may not be a deal breaker given that you seem to have limited access to the HTML
If the phone number is not in a suitable format (e.g. something like 01 987123456) it will not display correctly
A nasty little hack is used for IE as it doesn't calculate the width of the pseudo element correctly using ch for some reason. Credit to SW4 for this: https://stackoverflow.com/a/20541859
A solid background colour is required
The general idea behind this is as follows:
.phone
text-indent: 1ch; on .phone moves the whole text to the left by one character
.phone is set to position: relative; to allow the pseudo element to be positioned relatively to it
white-space: nowrap; ensures that this doesn't wrap onto a new line if there is a break in the number
.phone:before
background-color: white; masks the digits in .phone
border-right: 1ch solid white; hides the sixth digit in .phone, in effect this is the space
content: attr(data-phone); uses the data-phone attribute on .phone to populate the pseudo element with the same number
left: 0;, position: absolute; and top: 0; are used to position the pseudo element
overflow: hidden; hides any characters over the 5 character limit
text-indent: 0; resets text-indent: 1ch; set on .phone
width: 5ch; ensures that the pseudo element is only 5 characters long
The weird media query is the hack to target IE
Tested and working in FF 38.0.5, Chrome 43.0.2357.124 m and IE 11. Browsers not supporting the ch unit (such as Opera 12.17 and Windows Safari 5.1.7) seem to show the phone number in its natural state.
.phone {
position: relative;
text-indent: 1ch;
white-space: nowrap;
}
.phone:before {
background-color: white;
border-right: 1ch solid white;
content: attr(data-phone);
display: block;
left: 0;
overflow: hidden;
position: absolute;
text-indent: 0;
top: 0;
width: 5ch;
}
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
.phone:before {
width: 5.8ch;
}
}
<div class="phone" data-phone="01987123456">01987123456</div>
JS Fiddle: https://jsfiddle.net/scarjnb1/
It's not possible using CSS, just JavaScript. Then it'd be:
<div id="phone">01987123456</div>
<script>
var el = document.getElementById('phone');
phone.innerText = phone.innerText.replace(/^(\d{5})/, '($1) ');
</script>

Substituting a hard coded label on Volusion (for translations)

I'm working on a project built on Volusion, but unfortunately this platform does not offer full interface edition capabilities so I am trying to edit some labels which are hardcoded into the HTML (I need them to show in spanish).
I tried multiple options discussed in this forum, but so far I am only able to add an alternative text "after" the labels through the CSS; take for example main title on Shopping Cart page (http://pkheu.ahnfg.servertrust.com/ShoppingCart.asp):
/* ========== ORIGINAL LABEL IS "YOUR CART" ============ */
.shoppingcart h2.v65-your-cart-title span {
visibility: hidden;
display: none;
} /*THIS DOESN'T DO ANYTHING AND WITHOUT THE SPAN IT DELETES THE DIV COMPLETELY*/
.shoppingcart h2.v65-your-cart-title:after {
content: " / Su Orden";
margin: 15px 0 0;
visibility: visible;
} /*THIS AT LEAST PERMITS ME TO ADD "/ SU ORDEN" AS A SPANISH ALTERNATIVE*/
Would appreciate any advise on effective way to fully substitute the content on the div on Volusion HTML interface (ie delete the original "Your Cart" from view). Thanks in advance.
Cheers! Max
The easiest way to accomplish what you want without using JavaScript would be to add the following to your template.css file.
h2.v65-your-cart-title { display:none; }
Then simply add the following HTML to the bottom of your article 64 code.
<h2 class="v65-your-cart-title-spanish">Su Orden</h2>

Hide all, show a class with css

Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}

Print Media Footer CSS Not Working With Markdown and markdown-pdf

I am attempting to use the markdown-pdf node library to generate a pdf document from a markdown document. It is producing the pdf but I cannot seem to get repeating footers working.
The footer is at the end of the document with the following code:
<div id="footer">
© 2013 MyCompany
</div>
And the CSS file I am including has the following in it:
#media print {
#footer {
position: running(footer);
}
}
#footer {position: relative ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
This produces nicely formatted code on the html page at the bottom left, but the test is not displaying as a page footer on any of the pdf pages.
Any help much appreciated.
I think there could be 2 problems:
[1] markdown-pdf don't read the element because:
"A running element is not shown in its natural place; there it is treated as if ‘display: none’ had been set. [...]" -> W3.org
[2] markdown-pdf don't read the element because it's only defined for media print. (Maybe markdown read in media screen?)
I hope this thougths could help you.
Possible "solvings":
try media all/screen
ask alanshaw if running elements are supported (if not use your relative Css settings)