I have a HTML document with many tables which I want to be printed. The problem is that sometimes, the paper end is reached in the middle of a row, so half of it is printed in one page and the rest in the next page, even cutting a single line of text in two parts.
Is there any way to avoid this?
NOTE: I have already read this question, but I need a solution which not involves CSS, because is not working at the target computer, and I can't change that.
Even with CSS, the issue is difficult due to limited browser support to CSS pagination (as can be seen from the answers to the question you refer to).
Through years, this problem has existed, and I don't think anyone has souped up an HTML trick for the purpose. There have been some tricks for trying to prevent page breaks inside a paragraph or list by placing it in a one-cell table, but this has worked occasionally only, and besides, in your case you already have a table.
So I’m afraid there is no solution, apart from using elements that cause extra vertical spacing, like a pre element containing empty lines (to push the entire table to next page—this may of course make things much worse when the parameters of the situation, like page formatting and paper size, differ from your expectations) or splitting a table into two tables, possibly with extra space between them (even more problematic).
If the target computer doesn't support (enough of) CSS, then you can create a PDF document on the server. If you set the Content-Type correctly, the browser will download the document and start the PDF reader of the system.
If this isn't possible, then there is no solution.
Related
I have a div with some sentences that I don't want to be indexed by search engines.
Is it possible to somehow hide this from Google in a way?
I thought about using frames, and having the site within the frame being blocked by robots.txt, but I've never liked the idea of using frames.
Are there other options?
Technically, you could use iframe and put <meta name=robots content=noindex> into the iframed document. Using suitable attributes and CSS, you can make the iframed document appear as part of the page, mostly, though you would still need to reserve some fixed area for it.
Or you could generate the div with JavaScript, thought then it would not be seen when JavaScript is disabled. Note that search engine bots may execute JavaScript code and might thus “see” the generated content, though I would not expect that to happen now or in the near future.
If the content is text, without internal markup or images etc., you could have an empty div with a CSS rule that adds content using the :before pseudoelement and content property. This would fail for users with CSS disabled or with an aggressive user style sheet, and search engine bots might some day start interpretign CSS.
There might be trickier methods, too, but as a whole, there is no good way I think. It’s probably more useful to consider why you would want to prevent from finding the page on the basis of its content. As a tool for hiding information, it would be inefficient.
You could create images from the sentences, then the text wouldn't be indexed.
I am developing a web application and I want the users to be able to copy some parts of the page and paste them into MS Word with minimum loss of html formatting. For example users should be able to copy only a table from the page and paste it into word with minimum loss (assume that the page contains necessary mean,scripts to select only a single table or div).
How should I develop the html so that users can copy-paste with minimum loss? For example should I prefer tags like b,i instead of css, should I prefer inline css etc.
As long as you don't rely on external CSS you're good; either inline CSS or tags such as B will do the trick.
Should probobly stick to CSS2 - no CSS3 fanciness. Only use websafe fonts of course, they have to be avaliable on the client's machine. If users will be able to copy multiple container elements you might want to design using tables rather than divs. Stick to a strict layout and don't use absolutely positioned elements and stuff like that. Aim for a strict, square and narrow layout that will fit an a4 page nicely.
If you know what your users will paste, the save option is to make that part in a seperate page so that it is easy to paste.
By default MS-Word will give the same formatting but the width is always fixed, which can cause some issues (too wide or too narrow).
Another point to consider is that copying from a website always follows the flow of the HTML and not how it may appear in the browser. So all the to be pasted data need to be adjacent in HTML.
Be careful about:
absolute positioned elements, overlays, etc.
Elements that are scripted or dynamically loaded using Ajax
Scripts will always be dropped
To test it just paste something into word and than save the word-file in HTML.
See how it looks.
EDIT: Rephrased question.
Other than being bad practice, what other reasons are there against empty paragraphs in HTML?
ORIGINAL:
Background
Currently to add a nicely space paragraph in our CMS you press Enter key twice. I don't like empty paragraphs because they seem unnecessary to me. If you want a new paragraph, just press Enter and space it with CSS. If you want to write just below some text (e.g. to display code), then do a line break with Shift+Enter.
Question
Is there any very good reason in not allowing empty paragraphs? Is there a standard here? Seems like I just have a philosophical issue right now -- i.e. using empty paragraphs probably won't make page viewing faster or save that much space.
One thing I've learnt the heard way is that any time you have a WYSIWYG editor for a web page, you stand a risk of ending up with poor quality HTML.
It doesn't matter how good the editor is, or how well trained your people are to use it, you will end up with bad code.
They'll click the 'bold' button instead of selecting your sub-title class. They'll create spurious paragraph tags rather than line breaks. And I've had to explain to one person several times why it's a bad idea to use multiple spaces to indent stuff.
Even when people are very good at using the editor and understand the implications, you'll still get things like stray markup setting styles and then unsetting them without any content, because if you (for example) make a word bold and then delete it, it generally doesn't delete the bold tags, and no-one thinks to switch to the HTML view to check.
The basic problem is that when you make it easy to use like a word processor, people will treat it like a word processor, and the underlying code becomes completely irrelevant to them. Their job is to produce content that looks good, and as long as they can achieve that, they don't generally care for how the code looks.
The good thing is that there is a solution. In general, the people generating the content are the same people who care the most about SEO. If you emphasise that there might be SEO consequences to poor quality HTML, I find that they suddenly care a lot more about the code they're generating. They still don't generally have the skills to fix it when they've broken it, but it does seem to make people take more care to follow the rules.
To directly answer your question, I don't think it's a disaster to have empty paragraph tags like that. It's preferable not to though, and you need to consider how the content would look semantically to a search engine - it may cause the search engine to see the two paragraphs of content as being less connected to each other than they should be. This may affect how it weights the content of each paragraph when it comes to deciding its page rank. In truth, it's unlikely to be a huge difference; in fact, I'd say it's probably very tiny, but in a competitive world, it could be enough to push you down a few places. There are probably other more important SEO issues for you to deal with, but as they say, every little helps.
There are times when you have a CSS styling a particular element in your case a paragraph. IF you will use empty paragraph they will unneccesarily pick up that styling which might not be needed.
By styling paragraphs with CSS, you can change the way paragraphs are styled easily in future.
For example, you might want to style differently if the user is browsing on a mobile device, or you might just decide that you want to add more or less space between paragraphs (using attributes like margin-top and margin-bottom on the p tag I guess) because it just looks better that way. If the spacing is done with extra p tags it'd be a lot harder to change.
I expect that things like screen readers for the visually impaired would deal with CSS-styled paragraphs better than if the structure of the page is changed by adding empty paragraphs.
I have a page with a wide (say around 3000px) horizontal graph which is normally scrollable.
In the printing version I render the entire graph, (I actually have a separate JAvascript/HTML code for the printing version), so it takes lets say three A4 widths (landscape) on the screen.
In this situtation I see the browser (FF3 in this case) does not allow me to print the wide page on several paper sheets (based on the print preview).
It seems like the only way to have the entire document printed is to have the user set zoom level to 30%, and then the entire graph fits on a single A4.
I must be missing some CSS directive there, but was unable to google it anywhere.
Will appreciate pointers/ideas.
Thanks.
You could add a rotation transformation to the print stylesheet. A partial solution as a long table will now be too wide...
.rotated-when-printed {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
filter:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123233995736766e-17,M12=-1,M21=1,M22=6.123233995736766e-17)
}
<!-- some very wide table -->
<table class="rotated-when-printed">
...
</table>
(a previous answer of mine to this question was deleted, don't know why: I try again)
Long time I looked for a CSS based solution on this problem, and I think it's not possible to have vertical page breaks of HTML tables through CSS (at least not page breaks on tabular data in a HTML TABLE tag, but it should be possible with tabular data organized in DIVs).
I think the only solution is to let javascript do the splitting.
When the page is loaded, javascript can check if table is wider than the page width desired: in that case it's possible to dynamically create a new table and duplicate in it only the columns that are outside the allowed width, and deleting them from original table.
All the process is a bit tricky, but results are satisfying.
It's also possible to let the javascript code run only for printing and not for the table showed on screen: a print button on the page can be arranged to run a server side code, for example php, which can generate a pdf thought the library wkhtmltopdf, passing to it the html page where is the table, including the javascript code. In fact wkhtmltopdf generate a pdf simulating a browser, and the javasript code will be correctly executed.
Now, this javascrpt library already exist, I wrote it and works very well (at least for my needs), and it freely available on Internet: I don't want to link it because already had a previous answer deleted, and I don't know if it was for that reason. But if someone is interested, you can ask in comments and I'll give it.
Printing html across multiple pages like this is not a nice thing to have to do
You probably want to break the graph up into page sized chunks (e.g. a div for each page) so when they are floated beside each other the graph looks as required. Then use CSS page-break-before or page-break-after to ensure that the printed pages are broken up correctly and you don't lose any content off the side of the page.
Also ensure that you have the media type specify print for the css you use for the printable version.
You can't control how HTML is printed in any real way - HTML/CSS/JS has no access to the print driver or browser print settings.
The only option is to convert your printable output to PDF (or some other print-centric format) and serve that instead.
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
I know everyone is all about DIV's and css and against tables now days, I have always used tables because they are so easy for me to visually see what I am doing while building, I am just now ventruing into the DIV world.
So my question are tables completely replaced by div's generally? I notice on the source of stackoverflow it is mostly DIV's but still uses tables as well, so I am guessing that tables must be used sometimes?
Below is an image of something I am trying to accomplish, most of it is coded but some of it is added in on photoshop, so far I have it all done in div's however what I have is only the background cells which are a list item and the photos, what I am missing from my code is all the text areas and it would be super easy for me to position the text areas within a table cell but since like 80% of the object is done with just css and divs I am not sure if I should just try to finsih it with just div's or if a table inside the comment div's would be the way to go.
I noticed on this page that the ansers are a table inside of a DIV
alt text http://img2.pict.com/e0/4e/de/1486585/0/screenshot2b15.png
To be semantically correct, tables should only used for tabular data and not for laying out a page.
David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Theres a lot of fervent zealotry regarding this notion of semantic content, which is fine and all but the only problem is that it's hopelessly naive.
Fact: there are some things that can be done trivially with tables that either can't be done in "pure" CSS, are extremely difficult in "pure" CSS, have some nasty side effects in "pure" CSS or have serious cross-browser issues.
I did my CSS3 Wish List and in compiling that list I realized some things I've been able to do with tables since HTML 3.2 a decade ago I still can't do with divs.
I'm all for having a semantic layout. Nice ideal. But until it can do everything it's trying to replace then the thing it's trying to replace will have valid use cases.
divs are used instead of tables in most of the sites. But you can use tables in some situations where design using div will be complicated in a cross browser way.
For eg vetical aligning contents inside div will be a big problem as compared to that in table cells.
In this page also you can find table tags being used.
Tables will only be rendered to the screen after all the cells are finished processing.
Take a look at the following questions also.
Why not use tables for layout in HTML?
DIV’s vs Tables or CSS vs. Being Stupid
Yet Another Divs vs Tables Question: Forms
I think a lot of people will argue that "tabular" data, or data that can best be expressed in rows and columns, should be kept in a table, but that divs were invented to replace tables as large layout elements. In my personal opinion, tables were always used as layout elements in a way that went beyond their intended purpose. That's not to say that people don't still misuse divs, for example
<div align="center">To replace a <center> tag</div>
I'd say check out A List Apart, specifically Their section on layout for tips on how to use modern compliant css-based design.
edit : My point was that this is the INCORRECT use of a div tag. In this example, you would use a style such as "text-align:center" or apply that style to the tag itself, but in this case there is no reason to wrap your text in a block-level element, because text by default is inline, so you would be better off with something more like this...
<p class="center">This is a centered paragraph</p>
and then in your stylesheet
.center { text-align:center; }
Thus, the following:
<div>Monday | Tuesday | Wednesday | Thursday | Friday</div>
<div>Work | Work | Work | Work | Play</div>
May be compliant but it looks terrible, and you'd be better off doing :
<table>
<th>
<td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>
</th>
<tr>
<td>Work</td><td>Work</td><td>Work</td><td>Work</td><td>Play</td>
</tr>
</table>
Tables are appropriate for tabular data, but divs + CSS is preferred for general page layout.
http://css-discuss.incutio.com/?page=TablesVsDivs has many good reasons why, as well as some counter arguments.
Like Korey and Thomas said, it's better to use table to represent tabular data.
If you want to make website layout in pure CSS, you can take a look on these CSS frameworks, which ease the task :
http://elements.projectdesigns.org/
http://960.gs/
http://www.blueprintcss.org/
http://elasticss.com/
http://www.yaml.de/en/
http://bluetrip.org/
http://devkick.com/lab/tripoli/
There are a lot of css frameworks out these, just find the one which fit your needs..
Update : Here is a more complete list of css frameworks.
Tables should only be used for tabular data. To figure out if what I am dealing with is tabular I ask myself "would I put this in Excel or Word if it?"
Bill Merikallio & Adam Pratt wrote a funny and informative article Why tables for layout is stupid. They also detail where tables should be used and when.
Tables as means of describing the structure of tabular data have not been replaced.
Tables as means for describing presentation have been replaced, but not with divs. They have been replaced with stylesheets in associate with whatever element best describes the semantics of the content. A div has no semantics associated with it, so it is used if there is nothing better.
It certainly depends. The Golden Rule you must remember is that the XHTML/HTML document file it's meant to describe content and flow.
Everything that is design should be (whenever it's possible, there are some certainly some case scenarios where we can't control it, like when CMS appear on the game) controlled using a CSS file.
Now, how can we reach the most semantically and pragmatical result? As with everything, it depends. Using XHTML/HTML tag elements instead on just relying on for correct content display it's the recommended way.
Notice that I've said tag elements. DIV is just one of them, but just replacing with whenever a or / tags exists is not enough. In fact, that will push you over "divitis" (the useless employ of divs for everything!) and WILL make your job hard. Try checking most tags and use them whenever seems correct.
Sometimes it's a pretty subjective matter as to what qualifies as a content or another tag. Just in this question someone asked if this content would be considered tabulated data (the one that tables are supposed to be used for), but I think that whatever content you must order and filter (and you can copy and paste on Excel without worries) it's worthy material.
Everythin else, it's mostly always just some interesting layout display that should be worked on with CSS and other tags.
Some people will say it's too much work and not worth it. I disagree. Though learning how to work with CSS/divs nuances it's somewhat different at first, you'll soon learn the twist of it.
Good luck and remember that we are always learning new stuff, so don't worry on question everything.
My recommendation would be to really learn HTML. Use the element that actually relates to the content. If it is a list of items, use one of the list tags. If it is data entry, use a fieldset tag. There aren't that many tags to chose from yet so many are neglected. If you simply replace all your table layout formatting with DIVs, your tag soup might be a little less chunky but you can still choke on it.
In terms of performance side, table(s) will only get rendered once the end tag () is reached, so if it is a table contains 100s of rows, you will see that table appears in the browser little later. This is not true for DIVs.
I posted on meta-SO about their tables: https://meta.stackexchange.com/questions/3110/when-did-so-start-using-tables-for-layout/3547#3547
In short, I think it's fine since it is tabular data.
You should check Elastic CSS Framework you can layout an unlimited combination of columns very easily and position them with its helpers, check out the documentation.
cheers
CSS is great and all, but I mainly use it for styling, not layout. I and countless other developers still use tables every day for building web pages, and will for the foreseeable future.
If you want to use absolute and relative positioning for layouts, go for it. If not, you are not evil or stupid for not doing so. The main thing to look out for when using tables is preventing table nesting hell IMO.