0

I supposed to put watermark text diagonally onto the image which both input submitted via google form. But before I create the gform, I want to test first whether this is possible to display the complete image with that watermark text when we send them as an html email. I referred to the answer diagonal watermark text for my html code and coded a simple GAS to call upon the html and send email. While I pasted the html code in html email editor, the output looks was as expected. But when I run the gs file and checked in the email inbox, the watermark text doesn't stay overlay on the image expected. The watermark just being printed below the image instead. Can anyone help to fix this, pls? Or is this even possible to achieve? Below is my gs and html code. Tqvm in advance.

My GS code :-

function myKad() {
  var myIC=HtmlService.createTemplateFromFile("MyKad");
  var mykad = myIC.evaluate().getContent();

  MailApp.sendEmail('dellzy76@gmail.com','Your MyKad','',{htmlBody:mykad});
}

My HTML code:-

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <style>#watermark {
  height: 200px;
  width: 300px;
  position: initial;
}
#watermark img {
  max-width: 100%;
}
#watermark p {
  max-width: 20%;
  position: absolute;
  top: 0;
  left: 0.2;
  color: #FF0000;
  opacity: 100%;
  font-size: 10px;
  pointer-events: none;
  -webkit-transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
}
</style>


  <body>
 <div id="watermark">
  <br>
  <br>
  <img src="https://share1.cloudhq-mkt3.net/563d38db6253d3.jpeg" alt="MyKad" width="250" height="160">
  <p><br>
  <br><br><b>----------------
  <br><i>This is just a copy for JPJ purposes ONLY
  <br>------------------<b></b></p>
</div>   
  </body>
</html>

Expected:
enter image description here

Current output in email inbox:
enter image description here

dell
  • 171
  • 13

1 Answers1

1

Unfortunately Gmail HTML is not as inclusive as normal HTML

Here is a list of supported CSS properties in Gmail.

So you will have to use a different kind of CSS to make it work, or try a workaround, such as generating an image in a separate HTML instance and then exporting it as an image to drive and then attaching it as an image to the mail.

iansedano
  • 6,169
  • 2
  • 12
  • 24