I looking for a way to make the input text background image to be printed when I save the page as PDF (right click, "Print ..." option, and "Save as PDF").
The page has an square background image to simulate that each character is being typed into a square.
That's a piece of code to show what I mean:
#text
{
background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");
width: 213px;
height: 18px;
background-size: 20px;
border: none;
font-family: monospace;
font-size: 13px;
padding-left: 5px;
letter-spacing: 12px;
}
Name: <input type="text" size="10" maxlength="10" id="text"/>
Any suggestion to simply "enable" that part to be printed, or any other solution that offers the same
flexibility of continusly typying, highliging and deleting the text, will be really appreciated.
You can do it using the 'color-adjust' CSS property and may specify different settings for '#media print' CSS at-rule while printing.
Following code is the simplest using only color-adjust respective -webkit-print-color-adjust:
#text {
background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");
width: 213px;
height: 18px;
background-size: 20px;
border: none;
font-family: monospace;
font-size: 13px;
padding-left: 5px;
letter-spacing: 12px;
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
Name: <input type="text" size="10" maxlength="10" id="text">
Tested on FireFox 85.
This answer was inspired by thread How can I force browsers to print background images in CSS? discussing cons and pros of background-image printing.
Related
Using HandlebarsJS
I have a blank area with with dynamic content rendered. When text is not reaching min-height the content must contain empty underlined blank rows.
I tried using a background image in css like follows:
.regimul-juridic {
/*background-color: red;*/
margin-top: -5px;
min-height: 100px;
position: relative;
background-position: fixed;
line-height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAABlBMVEUAAAAAAASiCn3WAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjIAwaAACkAIHWnJmDAAAAAElFTkSuQmCC);
backdrop: static;
}
.regimul-juridic > p {
color: #000000;
font-weight: normal;
font-size: 9px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
but without success, because if there is more content on the area above the image will not expand properly. Does anyone have a solution ?
Picture showing what I am trying to achieve here:
For the underline you can use hr tags in the html
I used the 2016 (0.5.0) version of html2canvas for a long time because it always worked well for what I needed it for. Now I have to switch to the current version, but I have some problems:
The image that is created no longer has rounded corners. The png is always rectangular. And now I ask myself if I am doing something wrong, or if it might be a bug in the current version of html2canvas? I wanted to ask here first before posting this as an "issue" on GitHub.
The result with the 2016 0.5.5 version: https://i.imgur.com/gxutBEY.png (rounded corners)
The result with the 2019 1.0.0 version: https://i.imgur.com/LLY9WpI.png (rectangular corners)
Here's a JSFiddle that shows the issue: https://jsfiddle.net/ROPfiddle/jskLuw3v/3/
This is the current version (1.0.0-rc.5) of html2canvas: https://html2canvas.hertzen.com/dist/html2canvas.js
This is my CSS:
body {
font-family: system-ui, Helvetica, Arial, sans-serif;
margin: 19px 20px 0 20px;
background-color: #000;
}
#wrapper {
position: absolute;
white-space: nowrap;
}
#badge {
padding: 70px 67px 63px 71px;
border: 13px solid #a6a6a6;
border-radius: 110px;
line-height: 1;
background-color: #000;
color: #fff;
}
.icon img {
width: 273px;
height: auto;
border-radius: 62px;
}
.icon {
float: left;
}
.typo {
margin-top: -3px;
margin-left: 336px;
}
.text {
font-size: 92px;
font-weight: 500;
color: #a6a6a6;
letter-spacing: 0.04em;
}
.name {
font-size: 191px;
font-weight: 700;
margin-left: -6px;
letter-spacing: -0.0125em;
}
.finalbadge {
width: 100%;
height: auto;
}
This is my HTML (w/o the base64 encoded image):
<div id="wrapper">
<div id="badge">
<div class="icon">
<img src="data:image/png;base64, "/>
</div>
<div class="typo">
<span class="text">Listen on</span><br />
<span class="name">iTunes</span>
</div>
</div>
</div>
And this is my JS:
html2canvas(document.getElementById("badge")).then(function(canvas) {
document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
document.body.innerHTML = '<img class="finalbadge" src="'+img+'"/>';
});
Am I doing something wrong? Or must it be html2canvas?
Since the question has already been answered, here's the JSFiddle that shows the solution/answer: https://jsfiddle.net/ROPfiddle/zyj9b6dc/2/
I can't tell you if this is a change from the 0.5.5 to the 1.0.0 version of html2canvas.
Nevertheless beside the required HTML element, html2canvas() accepts an optional second parameter which is a Javascript object. Among these options is a property called backgroundColor which accepts a rgba value - thus including transparency. If you set all 4 values to null you get your transparent rounded corners back.
So simply change
html2canvas(document.getElementById("badge"))
to
html2canvas(document.getElementById("badge"), {backgroundColor: "rgba(0,0,0,0)"})
I have a logo with text that is in sans-serif but when I change locale(language) of the page to Chinese the text isn't the same as in English you can still read it as English and that's all good but it forces my text in the logo to look odd. My question is can I force just that part of the text to look just as it is in English and keep it the same throughout the whole site so it looks the same. Is there a piece of code that I can enforce on that particular text to keep it the same in English through css. It's like the text changes shape when locale changes for that language
.neon {
position: relative;
overflow: hidden;
filter: brightness(200%);
display: inline-block;
height: 35px;
#-moz-document url-prefix() {
filter: brightness(150%);
}
.text {
background-color: black;
color: white;
font-size: 35px;
font-weight: bold;
font-family: sans-serif;
line-height: 1;
text-transform: uppercase;
position: relative;
user-select: none;
&:before {
content: attr(data-text);
position: absolute;
color: white;
line-height: 1;
filter: blur(0.02em);
mix-blend-mode: difference;
}
}
<span class="neon">
<span class="text" data-text="MY LOGO">My LOGO</span>
<span class="gradient"></span>
<span class="spotlight"></span>
</span>
The after pseudo-element doesn't line up with the text after another locale has been implemented. So when I choose Chinese the text is off by a few pixels and the lettering is blurry so I think that the text is being affected by the locale for that font how do I work around it.
I'm having issues with fonts such as Josefin Sans where the space above, and below the text is uneven. This makes it impossible to vertical align the text.
Look at this http://jsfiddle.net/G5aVK/.
HTML
<div class="text">
Hello World
</div>
<div class="text2">
Hello World
</div>
CSS
.text{
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}
.text2{
font-family: serif;
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}
As you can see the normal serif font is aligned vertical center in the div. But the Josefin Sans one is not, it has more space above each letter than under.
Is there any way to fix this? Is there any way with CSS or maybe Javascript to change the height above, and below the font? If you try line-height you will see it does not fix the issue.
EDIT: A lot of suggestions seem to be quickfixes that would only solve exactly this font size, exactly this font and so on. I would need a solution that would work over different fonts and sizes, because the content in this case is generated by the users so I can't control what size or font they will be using.
So if talking pseudo-code, a solution that I would look for would be "font-vertical-align: middle" or something like that. But maybe the only way to fix this is by doing ugly pixel-specific fixes.
That space belongs to the characters themselves; Which means you have to edit the font via a Font editor application to align the characters vertically in their code point.
However, you can play with line-height and min-height properties to achieve the goal:
.text {
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
line-height: .95em; /* Reduce the line height */
min-height: 1.2em; /* Set a min-height to the container */
}
WORKING DEMO.
Try this,
.text{
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
height:36px; // add height
line-height:24px;// add line-height
}
Demo
The Reason why the font isn't aligning vertically is due to the font type (some font types can have their typography lines offset to most conventional fonts)
http://jsfiddle.net/denistsoi/28zx2/
I added the following css rule
.text {
padding-top: 8px;
}
Update
http://jsfiddle.net/denistsoi/28zx2/3/
Another way is to
HTML
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<div class="text">
<p class="content">Hello World</p>
</div>
<div class="text2">
Hello World
</div>
This way you can also adjust the vertical alignment with your margins~
CSS
.text > .content {
display: inline-block;
vertical-align: middle;
margin: 2px 0 -2px 0;
}
I'm creating an web system, but it's not showing correctly in firefox (and probably not in IE too), but it's great in Google Chrome, the page is that: Page with errors
The problem is that my < ul> component is too large in Firefox. I'm using width: 760px; and repeating an small width image over this 760 pixels. But the firefox do it for more than 760 pixels (as you can see in the link).
This is my ul-html code:
<body id="maincontent">
<ul class="ulmenu">
<li><a href="#" >Registrar</a></li>
<li><a id="lastmenu" href="#" >Realizar login</a></li>
</ul>
</body>
And my css:
root {
display: block;
}
#maincontent
{
background-color: black;
width: 760px;
margin: auto;
}
ul.ulmenu
{
text-align: center;
margin-top:0;
display:table;
width: 760px;
max-width: 760px;
list-style-type: none;
height: 60px;
background-image: url(../image/menubg.png);
background-repeat: repeat-x;
/*
visibility: hidden;*/
}
ul.ulmenu li
{
float: left;
}
ul.ulmenu a
{
background-image: url(../image/menudiv.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
line-height: 60px;
display: block;
color: #ffffff;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
}
ul.ulmenu a:hover
{
color: #AAAAAA;
}
In order to make the options of the menu centralized, i created some code in JS with jQuery to do that. If I remove this code, the width of green image in firefox becomes smaller, but it's still bigger than necessary (about 100px), the chrome images keeps unchanged.
I know only basics of css. Can anybody point me how can I fix that?
----EDITED-----
Fiddler URL for code (but the error is only noticed on maximized browser):
See it on Fiddler
Here is what I understand.
Seems, In firefox your are adding padding-left to your element style which makes it wider.
ul.ulmenu li
{
float: left; //remove it
display: inline-block; // add it
}
Remove this line from js code.
$(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");
Solution: Give width: 551px and display: block to your ul.ulmenu CSS class. That will solve the issue.
Reason: The reason for the issue is FF and Chrome treating display: table differently. For an element with display set to table, FF adds the padding to the width, whereas Chrome doesn't. The solution is to use the display: block CSS property that behaves the same in both browsers (FF as well as Chrome adds padding to the width for block elements)