I'm using puppeteer to generate a PDF file for my report view and I want to add a watermark on that report PDF version. Is there anyway that I can do that?
The easiest way to do it, is to add an additional element to the page, which represents the watermark when the PDF is created. As you can change the page in any way you like, you could add a "Watermark" element to the page like this:
await page.evaluate(() => {
const div = document.createElement('div');
div.innerHTML = 'Watermark Text...';
div.style.cssText = "position: fixed; bottom: 10px; right: 10px; background: red; z-index: 10000";
document.body.appendChild(div);
});
await page.pdf(/* ... */);
The code adds a fixed element to the bottom right of the page. When printed it will appear on every printed page. You can use any kind of CSS styling to style your watermark. Just make sure it has a high z-index value, so that nothing overlaps it.
I use following code to open a chrome browser action popup. I have specified min-width & min-height to html & body element, but it doesn't seem to work, as I can see a small white box when I click on icon & then my content & styles get applied. I am trying to set default dimensions so there shouldn't be a small white box at first at all!
chrome.browserAction.setPopup({
popup: 'index.html',
})
In my css:
html,
body {
margin: 0;
min-width: 200px;
min-height: 300px;
}
Set height:100vh
If not height it should take height 100%.
I'm trying to use the following code on my server to estimate the length of some text fields and potentially trim them before sending them by email...
String.prototype.visualLength = function()
{
var element = document.createElement("span");
element.css({
"visibility": "hidden",
"white-space": "nowrap",
"font-weight": "normal",
"font-size": "18px",
"line-height": "40px",
"font-family": "Helvetica, Arial, sans-serif",
"text-decoration": "none"
});
document.body.appendChild(element);
element.innerHTML = this;
return element.offsetWidth;
};
String.prototype.trimToPx = function(length)
{
var tmp = this;
var trimmed = this;
if (tmp.visualLength() > length)
{
trimmed += "...";
while (trimmed.visualLength() > length)
{
tmp = tmp.substring(0, tmp.length-1);
trimmed = tmp + "...";
}
};
return trimmed;
};
Obviously I'm getting an error because "document" is not defined server-side. I added the Meteor packages htmljs and domutils hoping they might solve this, but in vain. And I can't add the Node.js package jsdom because apparently it won't work in deployed Meteor apps.
Any idea how to achieve what I'm trying to do?
You cannot truly rely what will happen on client-side. Even Ubuntu and Windows shows the fonts different because of different hinting, antialiasing and they may have an effect on the displayed sizes.
If you modify your span's css as following, when it has a text larger than the desired space, no matter what, the remaining will be displayed as ...
max-width: 10%;
border: 1px #000 solid; // JUST TO SEE the effect clearly
width: 10%;
overflow: hidden;
height: 20px;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
** Please note that you need a proper height value, other wise the text will go to bottom and what you want will not be achieved.
Try on http://jsfiddle.net/sG6H2/
I don't think this is possible. Server-side code running in node.js does not run in the context of a web browser's rendering environment and so can't access the browser's DOM and available fonts and display configuration. Even if you were to successfully run your code and compute a number, that computation has no relationship to my device when I receive your email. The fonts, the display size and resolution (could be a desktop, could be a mobile device), my own configuration (for example I set a minimum font size in Firefox on my desktop), etc. Instead try defining your size in em units instead of pixels.
I'm building a Chrome extension that does some UI injection using content scripts. The problem is that since every website is different and may try to screw around with the default positioning of certain elements (divs, lists) etc, my ui looks different depending on which page it is being used.
I've tried using YUI reset v3 and that helped but didn't remove all the weirdness. Does anybody know of an even more aggressive reset method that does more than just clearing margin/padding and reset text sizes?
Thanks in advance.
We've had a similar issue, we've tried CSS resets and also using specific id tags for the elements and CSS rules, but it was never robust enough...
The best solution was to inject the elements into the DOM as Shadow DOM elements that contain the style inline. You can read your CSS file via AJAX requests and inject them to the Shadow DOM dynamically, just make sure that they are within the web_accessible_resources files (you can use a wildcard to your CSS folder).
In case that you are not familiar with Shadow DOM, here is a good example of how it works. It might take a bit of re-factoring on your end, but it's really the only solution that works a 100%.
I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.
Take creating a dialog for example. After installing Boundary, you can do this in your content script
var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");
Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");
Boundary.appendToBox(
"#yourDialogID",
"<button id='submit_button'>submit</button>"
);
Boundary.find("#submit_button").click(function() {
// find() function returns a regular jQuery DOM element
// so you can do whatever you want with it.
// some js after button is clicked.
});
Elements within #yourDialogID will not be affected by the existing webpage.
Hope this helps. Please let me know if you have any question.
https://github.com/liviavinci/Boundary
meyerweb's reset styles look slightly more aggressive.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
That is why you should inject at document_end. You can do that by setting "run_at": "document_end" in the Content Script Manifest
My client is asking me to reduce size of current website for desktop browsers by 30%.
is there a css or meta tag to do it like viewport meta tag on a mobile browser?
Hmmm... I know this is an old question, but there is a MUCH better way to go about this: use the CSS scale() transform function on the <html> tag to scale EVERYTHING inside. Check out this jsFiddle: http://jsfiddle.net/mike_marcacci/6fMnH/
The magic is all here:
html {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
width: 200%;
height: 200%;
margin: -50% -50%;
}
You can look at the css screen media type.
It is:
Intended primarily for color computer screens.
You can use it this way:
#media screen {
body { font-size: 70% }
}
There is also a handheld media type, primarily:
Intended for handheld devices (typically small screen, limited bandwidth).
However, you will need to test the different devices and desktops your client is focusing on in order to determine how using these media types will effect the user experience.
Odes is right.
#media screen {
body { font-size: 70% }
}
But to make this really work well, you must use ems instead of px everywhere. That goes for margin and padding as well as width and height of all elements.
A good way to do this is to use SASS. Just create your own sass function to convert your px measurements into ems on the fly. Something like this will do:
#function em($px, $context: 16, $basesize: 16) {
#return (($px/$basesize)/($context/16))+em;
}
Which then gets used in your CSS like so:
div { font-size:em(12); width: em(200,12); }
So, if the body font size was set to 100%, then the font size would be equivalent to 12px and the width of the div would be 200px wide.
Here code for proportional scale and positioning, wnen using "transform: scale"
CSS
html,body
{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
html
{
position:absolute;
}
JS
var scale = 1;
$('html').css('transform','scale('+scale+')');
var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale );
//$('html').width(windowWidth*scale);
var width = (100*(1/scale));
var left = -(width*(1-scale))/2;
var height = (100*(1/scale));
var top = -(height*(1-scale))/2;
$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');
You can enable the meta viewport tag on desktop with JS. First you should derive the setting (width) from the meta tag:
var viewportcontent = $( "#myviewport" ).attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
var wspec = viewportcontents[i].substring(6);
}
}
Then you need a little JS and the solution of Mike to get this working solution: http://codepen.io/anon/pen/GqoeYJ. Note that this example forces the width to be 1200 pixels, but initial-scale: 0.7 could be implemented in the same way.