<commit_before><!DOCTYPE html>
<!-- TODO Switch tabs to spaces -->
<html>
  <head>
    <title>CanvasMail</title>
    <link rel="stylesheet" href="main.css">
    <style>
      .norm a {
	  color: blue;
	  text-decoration: underline;
      }
      
      .styled a {
	  font: small-caps italic bold 1.2em sans-serif;
	  color: red;
      }
      
      .strike-through a {
	  text-decoration: line-through;
      }
      
      .shadow a {
	  text-shadow: 0.2em 0.2em 0.2em green;
      }
      
      .transform a {
	  text-transform: capitalize;
      }
      
      .webfont a {
	  font: 2em Tangerine;
      }
      
      .pseudo a:hover {
	  font-style: italic;
      }
    </style>
  </head>
  
  <body>
    <div class="wrapper">
      <h1>CanvasMail</h1>
      <p>CanvasMail attempts to hide emails from web crawlers by rendering the
	email on a canvas element instead of having them ever exist in the
	DOM. The steps CanvasMail takes are fairly simple.</p>
    
      <ol>
	<li>Capture style from the selected element</li>
	<li>Create canvas with email, attempting to render style as best as
	  possible</li>
	<li>Clear the element, and insert the canvas into it</li>
	<li>If element is an anchor, insert mouseover javascript that sets href
	  on mouseover</li>
      </ol>
      
      <h2>Notes</h2>
      
      <ol>
	<li>Because the email is rendered on a canvas, it doesn't scale well
	  then the screen is zoomed.</li>
	<li>Some text styling is mimicked, not natively supported, so the
	  appearance doesn't always match css styled text (see below).</li>
	<li>Because the href element is only set on mouseover, CanvasMail links
	  can't be navigated to via tabbing.</li>
	<li>The email will exist in contiguous memory on the client side at
	  various points of computation, and for links, will exist in the DOM
	  during mouseover</li>
      </ol>

      <h2>Examples</h2>
      
      <p>The following table contains some example of how well CanvasMail
	handles different environments.</p>

      <table>
	<tr>
	  <td>Style</td>
	  <td>Notes</td>
	  <td>Standard Email</td>
	  <td>CanvasMail</td>
	</tr>
	
	<tr>
	  <td>Plain Text</td>
	  <td><p>Plain or colored text is rendered fine by CanvasMail.</p></td>
	  <td><EMAIL></td>
	  <td><span class="canvas-mail">Email protected with javascript. Enable
	      it to continue.</span></td>
	</tr>
	
	<tr>
	  <td>Default Link</td>
	  <td><p>jQuery can't detect "default" link style, so the link color and
	      underline needs to be set / normalized or it won't get
	      mimicked.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with javascript. Enable it
	      to continue</a></td>
	</tr>
	
	<tr class="norm">
	  <td>Normalized Link</td>
	  <td><p>Canvas elements don't support underlining text, so the underline
	      has to be done manually making it different than the standard font
	      renderer.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with javascript. Enable it
	      to continue.</a></td>
	</tr>
	
	<tr class="norm styled">
	  <td>Font Styled</td>
	  <td><p>All font modifications are supported by canvas, and so
	      any addition font styling will be transferred to the
	      canvas.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with javascript. Enable it
	      to continue.</a></td>
	</tr>
	
	<tr class="norm transform">
	  <td>Transform</td>
	  <td><p>Text transform capitalize has to be slightly mimicked. The
	      results might not match css, but it should be close (and east to
	      modify).</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with
	      javascript. Enable it to continue.</a></td>
	</tr>
	
	<tr class="norm shadow">
	  <td>Shadow</td>
	  <td><p>Shadows exist for canvas, but the appearance didn't seem to
	      match how css was displaying them, and the extra math to account
	      for the offset made this harder to support fully. Sorry.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with
	      javascript. Enable it to continue.</a></td>
	</tr>
	
	<tr class="norm">
	  <td>Email Parameters</td>
	  <td><p>Email parameters like subject, body, cc, and bcc can also be
	      included. cc and bcc are obscured slightly.</p></td>
	  <td><a href="mailto:<EMAIL>?cc=<EMAIL>,<EMAIL>&bcc=<EMAIL>&subject=This%20is%20the%20subject!&body=This%20is%20a%20short%20body..."><EMAIL></a></td>
	  <td><a class="param-canvas-mail">Email protected with
	      javascript. Enable it to continue</a></td>
	</tr>
	
	<tr class="norm pseudo">
	  <td>Pseudo Selector</td>
	  <td><p>CanvasMail does it's best to monitor pseudo-selectors and
	      regenerate the canvas (hover over the links).</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with
	      javascript. Enable it to continue</a></td>
	</tr>
	
	<tr class="norm webfont">
	  <td>WebFont</td>
	  <td><p>Webfonts work too, but the call to canvas mail needs to be made
	      after the font is loaded, otherwise CanvasMail will pick up the
	      computed fallback font.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="webfont-canvas-mail">Email protected with
	      javascript. Enable it to continue</a></td>
	</tr>
      </table>

      <h2>Acknowledgements</h2>

      <p>The paper texture is courtesy
      of <a href="http://www.bashcorpo.dk/">bashcorpo.dk</a>.</p>
      
    <script src="http://code.jquery.com/jquery-git2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script src="canvas-mail.js"></script>
    <script>
      $(function() {<commit_msg>Moved off of dev version of jQuery in example<commit_after><!DOCTYPE html>
<!-- TODO Switch tabs to spaces -->
<html>
  <head>
    <title>CanvasMail</title>
    <link rel="stylesheet" href="main.css">
    <style>
      .norm a {
	  color: blue;
	  text-decoration: underline;
      }
      
      .styled a {
	  font: small-caps italic bold 1.2em sans-serif;
	  color: red;
      }
      
      .strike-through a {
	  text-decoration: line-through;
      }
      
      .shadow a {
	  text-shadow: 0.2em 0.2em 0.2em green;
      }
      
      .transform a {
	  text-transform: capitalize;
      }
      
      .webfont a {
	  font: 2em Tangerine;
      }
      
      .pseudo a:hover {
	  font-style: italic;
      }
    </style>
  </head>
  
  <body>
    <div class="wrapper">
      <h1>CanvasMail</h1>
      <p>CanvasMail attempts to hide emails from web crawlers by rendering the
	email on a canvas element instead of having them ever exist in the
	DOM. The steps CanvasMail takes are fairly simple.</p>
    
      <ol>
	<li>Capture style from the selected element</li>
	<li>Create canvas with email, attempting to render style as best as
	  possible</li>
	<li>Clear the element, and insert the canvas into it</li>
	<li>If element is an anchor, insert mouseover javascript that sets href
	  on mouseover</li>
      </ol>
      
      <h2>Notes</h2>
      
      <ol>
	<li>Because the email is rendered on a canvas, it doesn't scale well
	  then the screen is zoomed.</li>
	<li>Some text styling is mimicked, not natively supported, so the
	  appearance doesn't always match css styled text (see below).</li>
	<li>Because the href element is only set on mouseover, CanvasMail links
	  can't be navigated to via tabbing.</li>
	<li>The email will exist in contiguous memory on the client side at
	  various points of computation, and for links, will exist in the DOM
	  during mouseover</li>
      </ol>

      <h2>Examples</h2>
      
      <p>The following table contains some example of how well CanvasMail
	handles different environments.</p>

      <table>
	<tr>
	  <td>Style</td>
	  <td>Notes</td>
	  <td>Standard Email</td>
	  <td>CanvasMail</td>
	</tr>
	
	<tr>
	  <td>Plain Text</td>
	  <td><p>Plain or colored text is rendered fine by CanvasMail.</p></td>
	  <td><EMAIL></td>
	  <td><span class="canvas-mail">Email protected with javascript. Enable
	      it to continue.</span></td>
	</tr>
	
	<tr>
	  <td>Default Link</td>
	  <td><p>jQuery can't detect "default" link style, so the link color and
	      underline needs to be set / normalized or it won't get
	      mimicked.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with javascript. Enable it
	      to continue</a></td>
	</tr>
	
	<tr class="norm">
	  <td>Normalized Link</td>
	  <td><p>Canvas elements don't support underlining text, so the underline
	      has to be done manually making it different than the standard font
	      renderer.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with javascript. Enable it
	      to continue.</a></td>
	</tr>
	
	<tr class="norm styled">
	  <td>Font Styled</td>
	  <td><p>All font modifications are supported by canvas, and so
	      any addition font styling will be transferred to the
	      canvas.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with javascript. Enable it
	      to continue.</a></td>
	</tr>
	
	<tr class="norm transform">
	  <td>Transform</td>
	  <td><p>Text transform capitalize has to be slightly mimicked. The
	      results might not match css, but it should be close (and east to
	      modify).</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with
	      javascript. Enable it to continue.</a></td>
	</tr>
	
	<tr class="norm shadow">
	  <td>Shadow</td>
	  <td><p>Shadows exist for canvas, but the appearance didn't seem to
	      match how css was displaying them, and the extra math to account
	      for the offset made this harder to support fully. Sorry.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with
	      javascript. Enable it to continue.</a></td>
	</tr>
	
	<tr class="norm">
	  <td>Email Parameters</td>
	  <td><p>Email parameters like subject, body, cc, and bcc can also be
	      included. cc and bcc are obscured slightly.</p></td>
	  <td><a href="mailto:<EMAIL>?cc=<EMAIL>,<EMAIL>&bcc=<EMAIL>&subject=This%20is%20the%20subject!&body=This%20is%20a%20short%20body..."><EMAIL></a></td>
	  <td><a class="param-canvas-mail">Email protected with
	      javascript. Enable it to continue</a></td>
	</tr>
	
	<tr class="norm pseudo">
	  <td>Pseudo Selector</td>
	  <td><p>CanvasMail does it's best to monitor pseudo-selectors and
	      regenerate the canvas (hover over the links).</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="canvas-mail">Email protected with
	      javascript. Enable it to continue</a></td>
	</tr>
	
	<tr class="norm webfont">
	  <td>WebFont</td>
	  <td><p>Webfonts work too, but the call to canvas mail needs to be made
	      after the font is loaded, otherwise CanvasMail will pick up the
	      computed fallback font.</p></td>
	  <td><a href="mailto:<EMAIL>"><EMAIL></a></td>
	  <td><a class="webfont-canvas-mail">Email protected with
	      javascript. Enable it to continue</a></td>
	</tr>
      </table>

      <h2>Acknowledgements</h2>

      <p>The paper texture is courtesy
      of <a href="http://www.bashcorpo.dk/">bashcorpo.dk</a>.</p>
      
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script src="canvas-mail.js"></script>
    <script>
      $(function() {
{'fraction_non_alphanumeric': 0.14679525475804386, 'fraction_numerical': 0.005803533327643595, 'mean_word_length': 2.944126556714911, 'pattern_counts': {'":': 0, '<': 461, '<?xml version=': 0, '>': 461, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5948324', 'n_tokens_mistral': 4139, 'n_tokens_neox': 3816, 'n_words': 1180}