As far as I understand in HTML5, you should only have one header tag and one footer tag in a document (or at least in a section). But what if you want one footer to appear on screen and a different one to appear when printing. As far as the HTML is concerned, you are adding two footers together, even though only one would appear at a time.
Would screen readers, for example, ignore the print version?
One way of doing this is to put two sections in each, one to be displayed on screen (.noprint) and the other to be displayed for print (.print). Display .noprint as you would and set .print to display none except for when being printed using an '#media print' query.
like this:
<header>
<div class="noprint">
<p>stuff for screen only goes here</p>
</div>
<div class="print">
<p>stuff for print only goes here</p>
</div>
</header>
<style>
.print {
display: none;
}
#media print {
.print {
display: inherit;
}
.noprint {
display: none;
}
}
</style>
Also, to answer your question about screen readers: they usually will not read an element set to display:none and I believe that to be true in this case. Here's a more comprehensive guide on how screen readers deal with display:none:
http://juicystudio.com/article/screen-readers-display-none.php
good luck!
Related
I would like to create a button using only HTML, to print the web page just as the way it appears on the browser.
But this basic code prints even the hidden blocks.
<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>
Could someone help me please!
Here The button generates this pdf with above code.
but the problem, it takes the whole body of the page, which has blocks hidden for computers but visible for mobile phones.
It is printing all the body including hidden blocks.
like in this below screen shot, this are normally hidden blocks for computer browsers.
I solve this problem by including some #media print rules in a stylesheet.
.print-only{
display: none;
}
.screen-only{
display:block;
}
#media print {
.print-only{
display: block;
}
.screen-only{
display:none;
}
.something1,
.something2 {
display:none;
}
}
Our landing in mobile looks ugly because the sentences are cut into two lines but only the last word jumps into the next line. Let me explain it better with an example. Let's say in desktop the sentences is:
Hello this is my beautiful website. You are welcome!
On mobile, the text is broken at the last word, which looks ugly:
Hello this is my beautiful website. You are
welcome!
However, only in mobile, I'm trying to achieve something like:
Hello this is my beautiful website.
You are welcome!
So far, the best idea I have is showing a text block in mobile and another different block text in the rest of devices doing something like:
#media(max-width:480) {
.hide_on_mobile {
display: none;
}
#media(min-width:480) {
.hide_on_non_mobile {
display: none;
}
But this is not a very elegant solution in my opinion... Is there a better one?
Use a conditional line break instead :
#media(min-width:480px) {
.mobile_only {
display: none;
}
}
<div>
Hello this is my beautiful website. <br class="mobile_only"/>You are welcome!
</div>
you can use br tag and break whatever you want and you can use media query to avoid it in pc or mobile . example given below
#media (min-width: 375px) {
h2 br {
display:none;
}
}
<h2>Hello this is my beautiful website. <br> You are welcome!</h2>
You can try something like this:
#media only screen and (max-width: 480px) {
.text span{
display: block;
}
}
<div class="text">Hello this is my beautiful website. <span>You are welcome!<span><div>
A potential css solution is to lower the width of your text section so that it drops the last sentence onto the next line when the width is less than 480px.
If you wanted to delve into javascript, you could create an if statement where if the width of the body is less than 480px, the innerHTML of your div equals = "Line OneLine Two";.
Hope that helps! Happy to explain further if you require.
Your current solution is probably the most common. But I guess you could also do something like:
HTML:
<div id='paras'>
<p>This is sentence one.</p>
<p>This is sentence two.</p>
</div>
CSS:
#paras p { display: inline-block; }
#media(max-width:480) {
#paras p { display: block; }
}
This isn't super elegant either, but does at least mean that the paragraphs will sit next to one another on desktop, then stack on mobile.
The drawback is that, on desktop, they'll never stack, even if you want them to. So you'll need manual breaks:
HTML:
<div id='paras'>
<p>This is sentence one.</p>
<p>This is sentence two.</p>
<p class='break'>This is sentence one A.</p>
<p>This is sentence two B.</p>
</div>
CSS:
.break::before { content: '.'; visibility: hidden; display: block; }
Fiddle.
Put the block in span
<span class="blockOnMobile">Hello this is my beautiful website.</span> <span class="blockOnMobile">You are welcome!</span>
#media(max-width:480) {
.blockOnMobile {
display: block;
}
Im working on a project for a family friend and I have run into an issue while printing a table it tunicates all the data but one page. This seems to be the case in all the browsers that i have tried (Chrome, Firefox, Safari) The Table is set up in a div (table-stuff in the example code) that has the overflow set to auto then the print css sets the overflow to visible (This is what i have found to do when searching for the problem) and hides all the other elements with a no-print class. Its set up as the following
<main>
<div class='grid'>
<div class='contents'>
<div class='table-stuff>
<table> Lots of data in table</table>
</div>
</div>
</div>
</main>
Print CSS:
.no-print {
display: none !important;
}
.table-stuff {
overflow: visible !important;
float: none !important;
}
Any help would be appreciated and if any other info is needed I'd be happy to provide. Thank You in advance
So I was able to get it to print correctly and it was because of google material design lite causing the issue. I still am trying to find what style was causing the issue though.
Try creating a #media in your css file. I would do something similar like this:
#media print {
table.no-print {
display: none;
}
}
Does Display: none on duplicate content affect SEO/Semantics?
Suppose you're building a mobile-first, responsive site. At smaller breakpoints, you've opted to show your page's heading tagline (<h1>) in the main hero banner. However, later, you'd like to display a company logo in that same spot, and display your tagline in a sub banner. For example:
<!-- Assuming following markup -->
<header class="hero-banner">
<h1 class="hide-on-lg">Company Tagline</h1>
<img src="..." class="show-on-lg" />
</header>
<div class="subhead-banner">
<h1 class="show-on-lg">Company Tagline</h1>
</div>
...with the following CSS:
.hide-on-lg {
display: block;
}
.show-on-lg {
display: none;
}
#media (min-width: 1200px) {
.show-on-lg {
display: block;
}
.hide-on-lg {
display: none;
}
}
The semantic rule is that you should never have more than a single h1 on a page, so my question is this:
Does having that duplicate content affect SEO, or violate semantics, if only one variation is ever actually visible?
Google crawls CSS ‘display:none’ Content, so it is duplicate content.
More info here
http://seoshrugged.com/2014/07/13/does-google-crawl-css-displaynone-content/
Yes, apparently it will adversely affect SEO; Google does take into account CSS being used to render a page (black text on a black background, etc..). Additionally, it is indicated there should only be one H1 tag per page, etc... A better way to still have relative 'dynamic' functionality in your case might be to use a combination of your media queries (bootstrap?) and jquery and change the style and position of it dynamically without necessarily calling them both an H1.
I'm creating a coming soon page but want the h1 header to have different titles as the screen widths change. Here's my problem though:
<h1 class="hide1">HOLD ONTO YOUR HATS</h1>
<h1 class="hide2">COMING SOON</h1>
<h1 class="hide3">ON ITS WAY</h1>
<h1 class="hide4">PENDING</h1>
<h1 class="hide5">NIGH</h1>
...and then:
#media only screen and (min-width : 1200px) {
.hide2, .hide3, .hide4, .hide5 {
display: none;
}
}
This is all a bit chopped and hacked together.
Is there a more semantic way of doing this that will 1, hide the other h1's in the source code and 2, Hide the other h1's from screen readers?
Thanks
edit: The title was a little confusing so it has been changed
Ok I don't seem to be able to question something in a way that's making sense, something to work on in the future I guess.
So after working on it for the past couple of days I think I may have found a solution that is less hacky.
<h1><span class="main__header--changer">COMING SOON</span></H1>
...and the css
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
The only thing is though screen readers won't be able to read the header.