4

I use CSS hyphenation (hyphens:auto;) for text paragraphs on websites. Sometimes it happens that email addresses are hyphenated resulting in a 'wrong' domain name. Example:

john.doe@planungsteam.abc

becomes

john.doe@planungs-
team.abc

How would I prevent that behavior? As this is user generated content, there is no way to manually add html elements. I was thinking about parsing texts with JavaScript, adding special tags to email addresses and use hyphens:none; on those tags. But I'm worried about performance.

(I think this is an issue especially with German text, where there are a lot of compound nouns)

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Christoph
  • 543
  • 1
  • 7
  • 20
  • you could use javascript to find the email address and then wrap a span tag around it that has a class of no-hyphen – Pete Dec 12 '13 at 10:42
  • 1
    at first glance, the best general aproach is to add html elements on the server and disable hyphens for those elements http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation/ – actual_kangaroo Dec 12 '13 at 10:43
  • You could consider justifying the text instead of hyphenating it, effectively removing the issue. – Alex Dec 12 '13 at 12:39

3 Answers3

3

There is no way in CSS to refer to parts of text without making them elements (unless they can be referred to as pseudo-elements, like :first-letter, but there are just a few pseudo-elements currently in CSS, and they don’t help here).

So you need to process the content programmatically, either server-side or client-side. Recognizing e-mail addresses is nontrivial, and you might consider handling some other constructs as well (e.g., URLs). For performance reasons, you might do this in client-side JavaScript so that the processing starts only after the document has loaded. Alternatively, if the data is saved on the server in HTML format, you could perform the processing before saving the data (though this increases the amount of data to be sent to browsers).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    Very good answer. I would end instead with `For performance reasons, you might consider doing this either in client-side JavaScript, so that the processing starts only after the document has loaded, or just once on server-side when the data is saved.` – ANeves Dec 12 '13 at 11:20
  • Thanks, i think i go for a server-side solution. As most of the websites i build are based on WordPress i will ask for a specific solution over at 'WordPress Answers'. There are some plugins/functions that filter the output and obfuscate email addresses. It should be easy to modify those a bit. – Christoph Dec 13 '13 at 13:55
1

yea, if it's user generated, probably easiest to process it with a regex, whether client or server side is up to you, here's a simple implementation in JavaScript.

var unprocessed = $('#user-output').html();
processed = unprocessed.replace(/([a-z]+\[-@-\][a-z]+\.[a-z]+)/g,'<span class="email">$1</span>');
$('#user-output').html(processed);

jquery wrap a e-mail address

although this regex may not pick up ALL email addresses

and, this will break email links e.g. <a href="mailto:support@example.com">

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
actual_kangaroo
  • 5,971
  • 2
  • 31
  • 45
  • Take note that in some cases this might break the HTML. Try applying it here: `
    If you have questions, please email me. :)
    `.     – ANeves Dec 12 '13 at 11:19
  • good point, we're assuming it's all plaintext here, that's why i'm only parsing the user-output, not the whole page.. still could go wrong though – actual_kangaroo Dec 13 '13 at 03:24
1

Things would get a lot easier if you had email addresses wrapped in a tags. I'm using a wordpress plugin which detects email addresses and transforms them to spam protected email links. After that it's easy to add this in css:

a[href^="mailto:"] {
    -webkit-hyphens: none;
   -moz-hyphens: none;
    hyphens: none;
}
Lariza
  • 11
  • 1