I would like to print a wikipedia page as-is with the header and the sidebar. By default, when you print them, articles are styled specially for the print medium. I am making material for a programming course and I specifically DON'T want that. checking $('[media]') returns several style and link elements but all are set with media="all".
Where is the stripped down styling coming from and how do I make it not apply?
If you inspect the source of an article page, you'll notice there's a class .noprint which is simply:
display: none;
In the external stylesheet itself (bits.wikimedia.org/en.wikipedia.org/load.php? ...), they use an #media print directive:
#media print{ a.stub,a.new{color:#ba0000;text-decoration:none}...
...etc...
If you use Firebug (or similar), you should be able to remove the .noprint and classes and related CSS to get round the styling.
Related
I am making some changes to a CSS template which was written by other developers. There is a place where a certain block gets duplicated. The first version is hidden for the wide-screen display and vice-versa.
I am not sure why it was not possible to utilize just one to do both, but apparently it is somewhat of a common practice. Perhaps it is because this hidden section is displayed as a narrow wide column (using Bootstrap 4) on the right-hand side of the screen, whereas in the mobile version it is displayed above the content in the wide column. But I digress ... Perhaps someone could comment on this bit.
The actual question is as follows.
Suppose we have a class
#media (min-width: 768px)
.d-md-none {
display: none!important;
}
What I would like to do is to display it for the print because it is easier to style it rather than the instance of the same block that is meant for the wide screen. So, in the print media styles, I attempt to do something like this
.d-md-none {
display: block important!;
}
However, I do not see it displayed. What is a prudent course of action here?
Add your print styles at the end of your existing CSS within a rule like so:
#media print {
...
}
Also as mentioned by other commenters, you have a typo in your !important declaration (the exclamation goes before the word important).
The issue: https://output.jsbin.com/donapohuci
This is a two column layout on desktop. Using a CSS media query, I have set it to be one column when the viewport is 800px or less:
div {
float: left;
width: 50%;
}
#media (max-width:800px) {
div {
width: 100%
}
}
The issue is that when you go to print this (at the moment, using Chrome) it decides that a letter sized piece of paper is smaller than 800px so prints using the media query styles.
We're using Bootstrap where it uses media queries like this. One solution is to modify the CSS so that it adds the 'screen' modifier:
#media screen and (max-width:800px)
Alas, this is a giant enterprise project with multiple teams all contributing so we'd really rather not mess with any of the foundational CSS at this time (as that usually causes a domino effect of other issues on other teams...)
Is there a way to workaround this short of writing a separate print style sheet just for this one particular page we need to have printed "as you see on screen"?
I'm thinking along the lines of some way to tell the browser "pretend the paper is wider than it is and use the desktop layout when you print..."
The way I would solve this is by adding the media screen attribute in the link to the regular CSS so it doesn't apply to print, and create a separate custom print stylesheet to be called after, again, using the print media attribute:
<link href="print.css" rel="stylesheet" media="print">
It is possible that the default Bootstrap has an include to a print file, but this should be easy to remove, and ultimately if it's not possible the latter stylesheet will still overwrite those styles.
I'm creating a TV schedule and it shouldn't have any print problems for at least one standard browser.
I need to put logo and title plus table headers on every page, after days of trying and searching I found out that Chrome wouldn't print table headers and position: fixed elements on every page because of this known bug.
Because of the capabilities such as printing background colors with -webkit-print-color-adjust: exact which I've heavily used and changing page borders with CSS #page property, I've customized my view to use Google Chrome, but now that I see it cannot print headers I'm looking for an alternatives which are:
To forget Chrome and start creating print view for another browser which needs to do tweaks to print background colors and change page margins (I'm afraid it's not possible).
To find a CSS/JS solution to make Google chrome to print table headers on every page.
TL; DR: Do you know any jQuery/JavaScript/etc. code to print table headers on every page in Chrome?
Yep, that's a Webkit/Chrome thing.
It won't print the thead on each page. FF for instance does.
What you could do to achieve something like this is use page-break.
Page break does only work on block elements, so you should style your tr's accordingly.
Like this:
tr{
display:block;
}
Now, you should start copying your thead and put it in at every Xth row with javascript:
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
On screen, you don't want all those heads. Remove them with a media query this (for convenience I added a .head class on my th > tr row.:
#media screen {
tbody .head{
display: none;
}
}
Now before each .head make the page break:
tbody tr.head {
page-break-before: always;
page-break-inside: avoid;
}
Check it out overhere: http://jsfiddle.net/jaap/7ZGVv/2/
Keep in mind, jsfiddle doesn't allow you to open just the preview frame, so printing does not work overhere, combine everything in your own file and you'll see the tables will split up, styling is not perfect, and it's not as flexible as your browser itself deciding where to split, but hey, it's something.
I have posted a solution here that solves this problem and does not require you to try to preempt the natural page breaks with forced page breaks (a technique which is inherently unreliable and tends to waste paper).
This solution won't work exactly for table headers, but it will allow headers of arbitrary html. I've created a library that allows Chrome to print headers and footers, see this answer.
I've created a report which is shown on the screen and it should be printable as well. The application has to support IE 6.0 too.
What font-sizes should I be using?
I've read, I should be using em for Screen media (web page) and pt for print media (I know em is scalable and pt isn't...).
How would you design such a page in terms of the css elements?
e.g. creating a separate css file for print media and duplicating all your css classes there and just modifying the font-size? so much duplication.
Isn't there a better way?
Thanks
You don't need to duplicate that much.
Create your report for the Web.
Then, in the body of your stylesheet add a reference for print styles, like so
#media print {
div#content {background:#fff; width:90%; font-family:serif; font-size:12px;}
div#header, div#insideheader, div#topnav, div#footer,
div#navcontainer, p.pic img {display:none;}
div#main {border:none; background:none;}
a {color:black;}
}
In the example above, I am
setting the background-color to white and extending the content to fill the width of most of the page
removing most of the extra pieces, like the nav and footer, extra pics, etc.
changing the link colors
setting the font to a serif font, easier to read for print, and a size of 12px, which is pretty standard.
If you have the first style sheet is marked media all, and the second style sheet is media print, the second style sheet will effectively be an extension, and over-rider of the first for print media. Prefer points for print and ems for screen.
Have a look at this article for other things you might not have thought about.
http://www.alistapart.com/articles/goingtoprint/
Does the css content property break the rule of content and separation because css is for presentation not to generate content?
What are other good uses of the css content property? I've seen it only in clearfix hacks.
Does css "content" property break the rule of content and separation because css is for presentation not to generation content?
Good point. I'd say it does if it's used for actual data.
The quirksmode page on content shows the limitations pretty well. You can't add any kind of styled content at the moment - it will work with too few browsers. You can add only character data.
The author of the quirksmode airs an interesting opinion:
I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.
I agree with this in general, but sometimes there may be cases where you don't want to rely on JavaScript to do the job. The comma example shown by Martin is a case where I find using content justified (although I personally would be feeling better if the commas would already be served coming from server side - it's what I personally would stick to.)
Also, keep in mind that adding commas and quotes through the content property may look bad when your content is viewed from elsewhere - for example in a search results page.
I'd say use it only sparingly, if you really need it.
One popular place that this shows up is in WordPress' default theme
.entry ul li:before, #sidebar ul ul li:before {
content:"» ";
}
It could be used in print style sheets to show urls for links for example:
p a:after {
content: " (" attr(href) ")";
}
Some link (http://www.somesite.com)
It's good for structured content. I wrote a number of test cases for the W3C's next print CSS rules and the one that seemed cool to me was being able to put "Chapter " and things like that into certain elements, especially when paired with counters. A simplistic example would be something like:
li.chapter:before {content: "Chapter" counter(chapter) ": ";}
None of that's print-specific and it's all presentation information. If you don't want your chapters to be preceded with the word "Chapter", take it out of the CSS. Controlling that in a stylesheet means your print version could have different chapter headings from your screen version your mobile could be different again, without having to have any knowledge of the viewer's device inside your application logic.
I'm using it to display accesskey in admin panel menu
.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }
CSS is presentational data. Any content that's only presentation-related is fine in a CSS file. For instance, suppose I want to put « and » around my <h1> tags; that's purely presentational. You could do it with the :before and :after selectors.
It should also be noted that content can also display images:
content: url('my/image.png');
I'd like to add, on a side note, that I'd consider the use of the content property to override already existing content an extremely bad practice.
A common use I see for it is with :before and :after tags to format quotations with some sort of stylized quote box. It can be a quick and easy way to get in stylized elements that you would otherwise have build images out of.
blockquote:before, blockquote:after {
content: '"';
}
I think this is an okay use for it, because it doesn't really break rules of content and style separation. My feeling is that if it is part of the design of the page, rather than the content, it's probably okay for content:
One interesting use case, although maybe not recommended, is for placeholder text on contenteditables.
[contenteditable]:empty:after
{
color: #aaa;
content: 'Enter some text';
}
Like zneak said, it is also possible to replace images. I find it practical to replace "content images" (not "asset images", which should be done via css background images) with higher resolution variants on iPhone 4 and other devices that have more than one real pixel per virtual pixel.
E. g.:
<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
#media all and (-webkit-min-device-pixel-ratio: 2) {
/* e. g. iphone 4 */
#people9 { content: url(//lorempixum.com/400/300/people/9/); }
}
It works, at least, on iPhone 4 and Android Nexus S, but I consider it experimental and haven't tested it on other devices. Here is a complete example:
https://gist.github.com/1206008
I just want to add to what has already been said.
With Cascading Style Sheets you can apply styles to a lot of types of documents.
The common use case is to apply CSS to HTML pages. In this case, the general idea is to use the content property only for aesthetic purposes.
Another use case is instead to apply CSS to XML documents. In this case the document usually does not contain elements for page structure (div, h1, etc...). So, in this scenario, by using the content CSS property more frequently, you can better define the page and the relations between elements and data.
For example you could prepend a description paragraph before a table, or appending the email address after the name of a person. Note that in HTML pages these page-structure elements should be part of the HTML document itself while they are usually omitted in a XML document and so they can be added using the content CSS property.
One of interesting use cases would be localization of a User Interface.