Feature suggestion: Render email address as SVG, text convert to outlines

[mavaddat]

It can be useful to provide a visual (non-href based) means of accessing an email address for people who don't want to click on links in the browser. An approach that avoids easy extraction by webcrawlers is generating an SVG using text and then converting the text to outlines¹.

Here, above, is an example of that approach I implemented with another author's email address: https://mavjav-edu.github.io/pcc_2e/contact/

It is possible to automate this by specifying a few parameters as inputs (possibly from _config.yml vars or SASS variables):

• Text font face to render
• Line height (for the effective inline image container)
• Max height (for image)
• Recolour text options (colour overlay using CSS filter hack)
• Bottom margin to make the text-as-image appear flush with neighbouring real text.

I found these by fiddling with the following CSS attributes to get the text to appear seamlessly (values provided as reference only):

    display: inline;
    filter: invert(38%) sepia(96%) saturate(1649%) hue-rotate(199deg) brightness(99%) contrast(97%);
    height: 16px;
    font-size: 16px;
    max-height: 1.6rem;
    line-height: 1.6;
    margin-bottom: calc(-0.2*16px);

[1]: To change text into outlines or artwork, you change the text into an object, so you can no longer edit that text by typing nor read it as text in XML. Rather, the text gets translated into multiple polygon paths, each composed of several points. The plus side is that it saves you the trouble of sending fonts to everyone who wants to use the file. Turning text into outlines makes it appear as though your text was created with the Pen tool. You want to use this tool when creating logos that will be used frequently by other people or artwork that you may not have control over. When you convert type to outlines, the type loses its hints, which are the instructions built in to fonts to adjust their shape so that your system displays or prints them in the best way based on their size. 🔝

[OliverCordingl1]

Surely this seems a little bit complicated for the result? You could instead convert your front-facing email to HTML entities which will obscure it more for the web scraper.

It will render in modern browsers (and likely headless ones too), but the actual HTML source that could be scraped, will show as the HTML Entity garbage.

I just created a gem that would do this (jekyll-html-encode) which is entirely based on this gem - how useful it is I'm not sure, but it could be a solution to block out some web crawlers?

[mavaddat]

Surely this seems a little bit complicated for the result? You could instead convert your front-facing email to HTML entities which will obscure it more for the web scraper.

True, but this technique (HTML entities in place of characters) is a well-worn and common technique which web scrapers can programmatically invert (it is no problem to create an automated lookup to convert HTML entities into their respective characters).