I'm trying to create a trifold print out using html/css, but I'm having a devil of a time getting the printed page to come out as I wish.
#page
{
size: 8.5in 11in;
margin: 0;
}
.trifold-segment {
position: relative;
overflow: visible;
width: 2.66in;
padding: 0.5in;
text-align: center;
float: left;
border-right: thin dashed lightGray;
}
.trifold-segment:nth-child(3n+1) {
border-right: none;
}
With this code each trifold segment should be 3.66 inches which should add up to just under 11 inches and fit neatly on an 8.5 inch by 11 inch piece of paper. Instead what I'm finding is that with these dimensions the third segment doesn't fit on the page. I'm not sure what I'm doing wrong or if there is some hidden margin that prevents me from defining the use of the full page myself.
Any insight or links to resources that might help? Thanks!
Most printers by default leave top and bottom and left and right margins when they print. Often there is a way to go full bleed (to the edge) but you'd have to Google your specific printer to find out how. Some printers don't allow this at all, so it all depends on your particular printer.
Cheers!
Cynthia
I ended up creating an RTF document with the properties that I wanted and then dynamically filled it in and offered it up as a trifold download.
Related
I'd like to display a read-only block of text as part of an HTML page - as it happens, it will be the monospaced text of the user's Git commit message - and while I want to display the text without wrapping, I would like to display a vertical line-length guide at 72 characters, so it's clear to the user when their lines have gone over the recommended length.
In some cases, the user will have entered lines of text much wider than the viewport.
Can I achieve this kind of effect with CSS?
(as an aside, I'm not drastically in favour of the text-wrapping guidelines, but my users need to be aware of them)
It's not really that practical to do it via CSS, as css doesn't give you any type of an nth-character selector. You could only draw a line at a fixed width which would be a best guess at your font character width.
However, if you're ok using a small amount of javascript, it could easily be done.
Here is a code sample I made for you showing how: http://codepen.io/beneggett/pen/GJgVrp
SO wants me to paste the code here as well as codepen, so here it is:
HTML:
<p>Example of syntax highlighting code at 72 characters w/ minimal javascript & css.</p>
<pre>
<code>
Here is my really awesome code that is nice
and it is so cool. If you are actually reading this, well I praise you for bearing with me
as you can see there is some short code
and some really, really, really, really, really, really, really, really, long boring code that is longer than 72 characters
it just goes on forever and ever and ever and ever and ever and ever and ever and ever and ever
The nice thing is we can tell our users when the code is short
or when it is getting way way way way way way way way way way way way way way way way way way way too looonggggg
oh wait, this isn't really code, it's just some gibberish text. but that's ok; the point is well made
i could go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on, but you'd get tired of it
That's it for now
</code>
</pre>
<p> This is just a simple example using tools that I'm comfortable with. There may be better methods to suit your needs, but it's a good start</p>
CSS:
pre{
white-space: pre;
background: #ececec;
border: 1px solid #c3c3c3;
overflow: auto;
}
pre .long{
border-left: 1px dotted red;
color: red
}
JS (CoffeeScript):
$(document).ready ->
lines = $('pre code').text().split('\n') # First we'll find all the lines of code
$('pre code').text('') # then, remove the old code, as we're going to redraw it with syntax highlighting
$.each lines, (n, elem) -> # Loop through each line
if elem.length > 72 # If it's longer than 72 characters, we'll split the good_code and the long_code then add some html markup to differentiate
good_code = elem.substring(0,71)
long_code = elem.substring(71)
$('pre code').append "#{good_code}<span class='long'>#{long_code}</span>\n"
else # otherwise we will just keep the original code
$('pre code').append elem + '\n'
This was just a simple illustration using tools that are simple for me; but the point is to illustrate it's pretty simple code that could easily be adapted to what you're trying to do.
Use a monospaced typeface like courier new, figure out how wide 72 characters is and lay a div underneath your text with that width and dashed right border.
As said by Ben Eggett use Monospaced fonts because
"A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space."
Even 'l' and 'm' occupy the same space. So find out how much width each char occupies based on the font size you are using and the vertical line at that place of the container.
For other fonts the widths for each characters are different and since CSS is static you cannot do with just css.
Below jsfiddle link provides example of implementation using monospaced font "Courier New"
http://jsfiddle.net/mnLzyy2x/
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<div class="separator"></div>
</div>
Css is
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 15px;
position: relative;
}
p {
margin: 0;
padding: 0;
}
.separator {
height: 100%;
border-left: 1px solid blue;
position: absolute;
top: 0;
left: 648px;
}
Enhancing Kalyan Kumar S's recipe.
Here is fiddle: http://jsfiddle.net/4mu5Lwex/
HTML:
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<p>_________1_________2_________3_________4_________5_________6_________7_________</p>
<p>1234567890123456789012345678901234567890123456789012345678901234567890123456789</p>
</div>
It looks that for a font-size of 10pt, the width of the each character is 6pt so the vertical line is at 72x6 = 432pt.
CSS:
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 10pt;
position: relative;
}
.git-msgs-container p::after {
display:block;
position: absolute;
left: 432pt;
top: 0;
margin-top: 0;
height: 100%;
border-left: 1px solid blue;
content: '';
}
Many of these suggestions will work most of the time. But positioning at absolute pixels will break if the user has set their default font size to something other than what you had intended.
Use a scalable unit like em or rem to set your font size. Then figure out how many ems or rems a single character width is, and position your vertical line marker at 72 x the character width.
example:
div#container {
position: relative;
font-size: 1rem;
}
if you haven't changed your default font size, 1rem will equal 16px. (If you have, reset you font-size to default in your browser before continuing) Now measure a single character, or a line of characters and average it out. (take a screenshot and pull it into Photoshop or Gimp to do this) Divide the single character width by 16, and you'll get the character width in rem.
eg:
character width = 9px;
9 / 16 = 0.5625rem;
multiply by 72 to figure out positing:
72 characters = 0.5625 * 72 = 40.5rem
now position your vertical line:
div#container .verticalLine {
position: absolute;
top: 0rem;
left: 40.5rem;
}
This sets up the positioning based on font size, not pixels. So it will scale with the font size accordingly.
If you want a large font-size (say 1.5rem), then multiply your calculated 72 character by the desired font size.
40.5rem * 1.5 = 60.75rem
n.b. If you don't want to measure exactly, or you don't have a graphics program, then you can just adjust the positioning by trial and error until it's positioned in the right spot.
You definitely want a monospaced font. You can include one like Paul Hunt's Source Code Pro (Google Fonts) with the following CSS:
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
Then, structure your commit message in a div like the one below. (Note the empty guide div):
<div class="commit-message">
Commit message goes here.
<div class="guide"> </div>
</div>
..and apply this CSS:
.commit-message {
font-family:"Source Code Pro", sans-serif;
font-size: 12px;
position: relative;
}
.commit-message .guide {
position: absolute;
top: 0;
height:100%;
width: 43em;
border-right: 2px dashed red;
}
Depending on the font-size you apply in the first rule, you may need to adjust the width in the second rule.
Here's a fiddle showing it in action: http://jsfiddle.net/yjjybtLu/4/
A pre-calculated distance for the "red line" doesn't seem reliable to me.
A background with 50 characters in exactly the same font as used in the textarea might do the trick.
This suggestion still relies on a fixed height for the background, which is not good if the height of the textarea needs to be flexible.
<style type="text/css">
* {
font-family: monospace;
}
.textarea-wrapper {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background-color: #fff;
}
textarea {
position: absolute;
width: 600px;
height: 400px;
background-color: transparent;
border-width: 2px;
}
span {
position: absolute;
top: 2px;
left: 2px;
display: block;
width: auto;
height: 100%;
border-right: 2px dotted #fcc;
color: #fff;
}
</style>
<div class="textarea-wrapper">
<span>01234567890123456789012345678901234567890123456789</span>
<textarea readonly="readonly">01234567890123456789012345678901234567890123456789 - 50 characters and more
</textarea>
</div>
I want to print a large table (so large that its rows are approx. 3 sheets of papers wide) from HTML. If possible, CSS should suffice for layout and the solution should work with different browsers.
I'm currently defining the following style rules:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
When I inspect the DOM elements e.g. in Firefox 33.0.2 (on OS X) I can see that the rules are recognized, but then when I look at a print preview ( File | Print | PDF | Open PDF in Preview) all columns that don't fit on the first page are cut off, i.e. I receive 1 page of printed output instead of 3. I have also tried Internet Explorer 11 and 10 to the same effect.
So how can I layout large HTML tables (ultimately large both in terms of columns an rows) for print out using CSS?
Bonus question: If page-break style components indeed only apply to block-level elements as is indicated in this previous answer, would it help if I construct my table from divs instead of tds when aiming for print output?
UPDATE
Here is a relevant sample that I just tried on JSFiddle. (I don't have an account there, so FWIK I cannot provide a direct link.)
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
If I try to print this table (e.g. by applying This Frame | Print Frame ... | PDF | Open PDF in Preview to JSFiddle's Result view in Firefox 33.1 for OS X and for Paper Size/Orientation A4/Portrait) I get one page of output. All columns but the first and part of the second are cut off.
You absolutely need to move away from a table if you need readable vertical printing on the page. Tables are great for display on the page when it's tabular data but are not a viable solution for printing as they don't respect flow.
There are plugins (like this one here, no affiliation – just a Google result) that will do this automatically for you, but here's the example. When you use this, make sure that the #media print is listed appropriately. To test locally, you can change that to #media screen.
That won't show the #page rules listed, but those are visible via a print preview.
Hope this helps:
Fiddle for printing in portrait
HTML
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
CSS
#media print {
#page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
Edit - Printing horizontally across several pages:
Okay, so this is probably a far less common use case, and we have to do some goofy things with it – so fair warning. I'll try to explain this step-by-step as it's cryptic and obnoxious.
Fiddle for printing in landscape here!
CSS
#media print {
#page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
This is the part that matters, as it's setting your print directives. Most of this is stuff we've seen in the original (with some tweaks as I was playing with it).
The part we care about comes here:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
What we're doing is flopping the whole thing on its side, and then sliding it to where we expect it to be. translate(8.5in, -100%) is telling the browser – Slide this element 8.5 inches (the width of a standard letter paper in the US) to the right, and then slide it up 100% of its height (the negative indicates up as opposed to down). We slide it to the right 8.5 inches so that it'll appear at the top of the page when rotated. We slide it up its calculated height so that we don't have an ugly gap to the left of the table when the rotation happens either.
Then, we instruct it that we want all of those calculations run in relation to the bottom left of the element's normal position in document flow. This keeps this crazy long table from being rotated way off to the right by setting the left property. The bottom property is important because we're rotating it clockwise a quarter turn, and if we did that from the top, it would be off the page to the left. That quarter turn is described in the next part of the transform statement: rotate(90deg);
Voila. The thing prints across multiple pages.
Before you ask: No. There is no way to prevent the page break inside the element of which I'm aware. I know it's obnoxious, ugly and all that garbage, but we can only work with the tools which we're given.
Update Firefox confirmed working:
page-break-inside: auto; is the default style, so unless you have a rule setting them differently, those rules will do nothing.
If your table isn't being broken onto multiple pages, then it's most likely because there some other rule you added, which prevents it - my guess an overflow: hidden.
What you first should do is remove all styles, and see if that prints on multiple pages. If yes, start adding your styles back (rule by rule, or if necessary line by line) to find the problem.
If you want to force page break you should use page-break-before or page-break-after. You need to know that the styled element should contain a non-empty block-level element and that it can't be absolutely positioned. However it is quite inconsistent on tables elements. Which leads us to your last question : yes, it would be more consistent to build your tables with divs.
However, considering what you want to achieve (printing large horizontal tables) you should know that trying to fit 3 pages into 1 can't work as your content won't be readable. As a matter of fact, the only best practice would be to use a vertical layout instead (just for print or for both web and print).
I have a website. In Chrome and Internet Explorer there is white space that interrupts the flow of text. I don't know where they come from.
I need help finding them and deleting them.
You can view the full page here: http://printingunlimited.com/business-card-info.htm
HTML code:
<div id="about-product">
<h3 itemprop="description">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"/>
</div>
The CSS that defines about-product handle:
#about-product {padding: 0 0 20px 0; height: 200px;}
img.product-image {display:block; position:absolute; left:560px; top:-5px; }
#about-product h2 {float:left;}
#about-product h3{display:block; font-size:16px; font-weight:normal; padding-bottom:5px; padding-right:5px; width:550px;}
Image pointing out the problem area:
Where does the white space between (your business cards are printed) and (on 14 point card stock) come from?
After some tweaking, this works:
#about-product {
padding: 0 0 20px 0;
height: 180px;
}
#about-product h3 {
display: inline-block;
font-size: 16px;
font-weight: normal;
float: left;
width: 550px;
position: absolute;
}
Try this:
.header-content {
width: 860px;
margin: 0 auto;
height: 190px;
position: relative; /* <~ add this line */
}
ul#drop-nav {
display: block;
float: none;
margin: 0 auto;
position: absolute; /* <~ change this line */
top: 170px; /* <~ change this line */
}
The strategy you should be using to solve these errors yourself is divide and conquer, as follows:
Remove all the html attributes and CSS styling that affects that particular HTML element.
Add back the html elements, in chunks, testing as you go, to see how each addition affects the page.
When you find the problem appear, cut the last batch of changes you made in half, to isolate which style is causing the problem.
When you locate the CSS attribute interrupting your flow of text, remove it or try something different.
All right, so as people have already suggested, your CSS styling is not suitable for IE and chrome. First, you must validate it at W3.
Next, i have added some styling to it to correct it .
Here they are :
<div id="about-product" style="height: 175px">
<h3 itemprop="description" style="display:inline-block;float: left;position: absolute;">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"> </div>
The screen shot is here below:
I am trying to create a block of photos on my webpage (Which has a set width, I didn't copy that part of the code over). I have put the code into the JSFiddle link below.
http://jsfiddle.net/T2qHR/12/
I will recreate what I am trying to do on a graphic editor. Click here to view it: http://www.flickr.com/photos/adpartners/6630840127/in/photostream
I'm not sure what I am doing wrong with my css/html. Everything is stuck on the left because I used float left in one of my div tags. I really want the background to be centered, which it is, then have the images over the top of it, like so: 3 photos, 2 photos, 1 photo, 2 photos. They will all link to youtube videos, which I have already got the links already for that part of it.
Any help would be much appreciated. I have done 10-20 different versions of this code with
p, div, table, ol/li tags, and honestly don't know which one to use for this now.
If you see what I am doing wrong, please fill me in. I'm at a loss of code!
Many thanks for any help you might offer,
R
Use display: inline-block and text-align: center instead.
div.floatingPic { display: inline-block; padding: 12px; }
div.containerVid { border: 2px solid #99cc99;
background-color: #000000;
padding: 45px;
height: 890px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center; }
As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).
fiddle: http://jsfiddle.net/T2qHR/20/
I am currently working on making a photography website for my good friend. I have employed the custom jScrollPane scrollbars from Kelvin Luck over at www.kelvinluck.com.
However, I am having some problems.
The temporary website is hosted here: http://phr-clan.com/nikka/index.php You'll see the lovely scrollbars in action. But, there's a problem. Scroll down all the way to the bottom and you'll see that the text is being cutoff before you can scroll all the way to the bottom. It turns out that there is actually around a full couple paragraphs that aren't being displayed. And the ironic thing is that it displays correctly in IE6 (Isn't it usually the other way around?)
Anyway, what am I doing wrong? Here is my CSS file: http://phr-clan.com/nikka/styles.css
Help is greatly appreciated. I have been pulling my hair wondering why it doesn't work.
Thanks.
Just add
p.text {
text-align: left;
font-family: 'DISCORegular';
font-size: 19px;
padding: 3px;
margin-left: 10px;
margin-right: 10px;
display: block;
}