Should the attribute text "fill" the text after sending HTML to the printer?

I notice a mismatch between the print outputs of this simple jsfiddle in Chrome and FireFox:

http://jsfiddle.net/Qrqug/

<input type="text" placeholder="Hello World" /> 

It seems Google Chrome is typing "Hello World", but FireFox doesn't.

A look in the HTML5 specification. I don’t see any descriptions of the actions that need to be taken for the placeholder during printing. A.

Will this vary depending on the browser implementation? Or is it defined in the specification somewhere else? Any way to get FF to print a placeholder using JavaScript, CSS, or HTML?

Here, FireFox does not display it when printing on CutePDF. I can confirm that it also does not appear when printing on a physical printer, but you should take my word for it:

enter image description here

Here is Google Chrome:

enter image description here

+4
source share
2 answers

First of all, I would like to direct you to the following article: http://laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/ only using placeholders that function as β€œtags”, perhaps not such a good idea.

Of course, if you want to print the placeholder in all browsers, you can do something like a good day. Example:

 <div> <input type="text" placeholder="test"> <span>test</span> <div> 

CSS

 div{position:relative;} span{position:absolute;top:0px;left:0px;display:none;} 

CSS Printing

 span{display:block;} 

Of course, if you want, you can automatically generate these spaces using JavaScript. Get value from placeholders and create span in de div

+3
source

In a fairly recent article ( http://drublic.de/blog/printing-the-web/ ) she was tested and mentioned how several CSS rules are implemented differently in each browser when printing a site. As you can see from your testing, the same goes for some new html attributes.

When it comes to placeholder , I would suggest that it looks like CSS styling, which, as Chris Koyer points out ( http://css-tricks.com/snippets/css/style-placeholder-text/ ), requires a provider prefix , since each browser treats it a little differently.

However, as mentioned here and in numerous articles, the placeholder text should complement the existing label and not rely on it themselves. Therefore, if it is not shown (regardless of whether it is in an unsupported browser or a printed copy of the site), no usability or information is lost.

0
source

Source: https://habr.com/ru/post/1483481/


All Articles