Watermark draft pages

[rbeezer]

Michael: David and I can work this one out, I imagine. Recording it here, so I don't forget. Feel free to tag so it does not get in your way.

Watermarking "DRAFT" pages would be helpful, especially as we put up Judson's book as "beta" quality.

I can do the identical thing for PDF in latex, so this would keep that feature consistent.

Riff on top answer at: http://stackoverflow.com/questions/68569/text-watermark-on-website-how-to-do-it

Rotation is not really needed, though it would be easier if you could place the center of the text. Shade of grey could match disabled buttons, or similar.

<style type="text/css">
#watermark {
  color: #f0f0f0;
  font-size: 150pt;
  /*-webkit-transform: rotate(-45deg);*/
  /*-moz-transform: rotate(-45deg);*/
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  left:50px;
  top:50px;
}
</style>

<div id="watermark">
<p>DRAFT</p>
</div>

[mxdubois]

You could probably add this to the css with a before/after element
absolutely positioned or fixed positioned in #content.
On Aug 17, 2014 1:56 PM, "Rob Beezer" [email protected] wrote:

Michael: David and I can work this one out, I imagine. Recording it here,
so I don't forget. Feel free to tag so it does not get in your way.

Watermarking "DRAFT" pages would be helpful, especially as we put up
Judson's book as "beta" quality.

I can do the identical thing for PDF in latex, so this would keep that
feature consistent.

Riff on top answer at:
http://stackoverflow.com/questions/68569/text-watermark-on-website-how-to-do-it

Rotation is not really needed, though it would be easier if you could
place the center of the text. Shade of grey could match disabled buttons,
or similar.

<style type="text/css">#watermark { color: #f0f0f0; font-size: 150pt; /*-webkit-transform: rotate(-45deg);*/ /*-moz-transform: rotate(-45deg);*/ position: absolute; width: 100%; height: 100%; margin: 0; z-index: -1; left:50px; top:50px;}</style>

DRAFT

—
Reply to this email directly or view it on GitHub
#43.

[rbeezer]

That's a good idea. But then would I be stuck with the text "DRAFT"? In other words, would that be hardcoded?

I'd certianly like it to be localized, but ideally I'd like to let authors write whatever they want. For example, Tom makes PDFs of his solution manual avaiable for instructors. I think he should watermark the pages with the names of the peole he gives it to (so they think twice about redistributing it). That' not a good use case for HTML, though.

[mxdubois]

Ah, I see. Well you could pull the attribute trick
https://developer.mozilla.org/en-US/docs/Web/CSS/attr with
data-watermark="DRAFT" in the HTML and #content:before{ content: attr(data-watermark); } in the CSS.

Or, as you say, you could just write it into the HTML. If you write it into
the HTML, that would allow you to also use images for watermarks.

You'd probably want to write it into either .main or #content. Depends
on how the fixed/absolute positioning and z-index stuff works out.

On Sun, Aug 17, 2014 at 3:52 PM, Rob Beezer [email protected]
wrote:

That's a good idea. But then would I be stuck with the text "DRAFT"? In
other words, would that be hardcoded?

I'd certianly like it to be localized, but ideally I'd like to let authors
write whatever they want. For example, Tom makes PDFs of his solution
manual avaiable for instructors. I think he should watermark the pages with
the names of the peole he gives it to (so they think twice about
redistributing it). That' not a good use case for HTML, though.

—
Reply to this email directly or view it on GitHub
#43 (comment).

[rbeezer]

Thanks, that sounds like a good project for me to pursue sometime. ;-)