Watermarked content can be annoying, but I get it: you work hard on a product and you should get credit for it. At my job, I sometimes have the same challenges–I work hard on a report or product, hand it over to the co-worker who requested it, and he takes it to upper management passing the content off, either unintentionally or otherwise, as his own. If only I could in some way watermark my work to make it clear where it originated.

Since I do a fair amount of work these days in Jupyter Notebook, I decided to take this question there and came up with three approaches:

1. The traditional image file approach

The most common approach to watermarking a web page seems to be creating an image file with your watermark and referencing that image file in your CSS. In Jupyter Notebook, you can use the IPython API to load your CSS:



1
2
3
4
5
6
7
8
from IPython.core.display import HTML





HTML('<style type="text/css">'

    'div#notebook {'

    'background-image: url("dadoverflow_wm.png");'

    'background-repeat: repeat;}'

    '</style>')

(The full notebook is here)

Alternatively, you can use this clever custom.css approach so that your watermark loads automatically in all your notebooks without any extra coding on your part.

One big drawback to this solution is that if you hand off your notebook to your customer, that image file needs to go with it. If your customer wants to get rid of your watermark, all he has to do is throw away the image file. Bummer!

2. Base64 encode that image file

Files can be embedded in a web page, so to speak, by base64 encoding them and pasting the encoding right into your HTML. You can take this approach with your watermark and then never have to worry about the image file having to travel side-by-side with your notebook. Here, I first base64 encode my image file and then use the IPython API to shove my markup, including my base64, into the CSS:



1
2
3
4
5
6
7
8
9
10
11
12
13
import base64

from IPython.core.display import HTML





with open('dadoverflow_wm.png', 'rb') as f:

    encoded_string = base64.b64encode(f.read()).decode()

    

image_url = 'data:image/png;base64,{0}'.format(encoded_string)

HTML('<style type="text/css">'

    'div#notebook {'

    'background-image: url("' + image_url + '");'

    'background-repeat: repeat;}'

    '</style>')

(The full notebook is here)

Same deal as above, you can also paste that markup in a custom.css that all your notebooks will inherit. While this eliminates your dependence on that image file, base64 strings, like this one, are huge! It is not fun dealing with such things. Fortunately, there’s yet a better solution.

3. The SVG way

SVG tags are the continuum transfunctioners of HTML–their mystery is only exceeded by their power. But you can do amazing things with SVGs, watermarking your pages among them. Here, I don’t even need to rely on an image file, base64 encode or not. I simply adjust the properties of my SVG and TEXT tags as needed to get the effect I’m after:



1
2
3
4
5
6
7
8
9
10
from IPython.core.display import HTML





svg = ("<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600px' width='600px'>"

       "<text x='-350' y='500' fill='lightgray' font-size='80' font-family='Arial' transform='translate(30) rotate(-45 0 0)'>DadOverflow.com</text></svg>")

HTML('<style type="text/css">'

    'div#notebook {'

    'background-image: url("data:image/svg+xml;utf8,' + svg + '");'

    'background-repeat: repeat;}'

    '</style>')

 

You can find all three of these examples in my GitHub page.