Email Obfuscation

This guide shows how to obfuscate email addresses in Thulite using a simple, effective CSS technique.

Background#

The article Email address obfuscation: What works in 2026? by Spencer Mortensen reviews ways to hide email addresses from spam bots while keeping them readable for users. It compares plain text, HTML entities, CSS display properties, JavaScript techniques, and other methods.

Results suggest that methods like CSS display: none and some JavaScript approaches are highly effective, while options like HTML comments and symbol substitution offer limited protection.

Setup#

1. Add a default (fallback) email address to config/_default/params.toml:

   # defaultEmail
   defaultEmail = "email@example.com"

2. Add the following CSS to assets/scss/common/_custom.scss:

   span.email b {
     display: none;
   }

3. Create the shortcode file layouts/shortcodes/email.html with the following content:

   {{- /* Set defaults and get args. */}}
   {{- $address := index .Params 0 | default site.Params.defaultEmail }}
   
   {{- /* Get parts. */}}
   {{- $addressParts := split $address "@" }}
   {{- $userName := (index $addressParts 0) }}
   {{- $rootDomain := (index $addressParts 1) }}
   {{- $rootDomainParts := split $rootDomain "." }}
   {{- $domainName := (index $rootDomainParts 0) }}
   {{- $topLevelDomain := (index $rootDomainParts 1) }}
   
   {{- /* Render. */}}
   <span class="email">
     {{- printf "%s@%s<b>.%s</b>.%s" $userName $domainName $domainName $topLevelDomain | safeHTML -}}
   </span>

   This shortcode uses the provided email address or falls back to defaultEmail. It then splits the address into userName, domainName, and topLevelDomain and renders the obfuscated HTML.

Usage#

You can now use the shortcode in Markdown with defaultEmail:

{{< email >}}

Rendering:

<span class="email">email@example<b>.example</b>.com</span>

Or provide an email address explicitly:

{{< email "team@example.com" >}}

Rendering:

<span class="email">team@example<b>.example</b>.com</span>

Resources#

• Email address obfuscation: What works in 2026?