Search code examples
htmlcssemailhtml-email

Is it possible to display dynamically an element or a text using style-embed and HTML in an email?

I'm trying to achieve something on an email template written in HTML but I'm not sure if it's possible.. Let's imagine this example:

I have this content. enter image description here

My goal would be to change the language of the email (text in red). It is possible to hide this text and replace it by another one with a checkbox / button within the email ? And if so, how can I do it ? As it's an email, I can't use Javascript and CSS is limited to style-embed in HTML. Thanks for any help

Solution

  • This is an HTML example might help you. partial support for email. https://www.campaignmonitor.com/css/selectors/checked/

    https://jsfiddle.net/ratank/95yq7gat/

    <style>
 .content {
   border: 1px solid red;
   margin: 10px;
 }
 
#langEN:checked~.content:lang(en) {
  display: block;
}

#langFR:checked~.content:lang(fr) {
  display: block;
}

 .content:lang(en), .content:lang(fr) {
   display:none;
 }

</style>
<label for="langEN" style="width: 300px" > English </label>
<input type="radio" id="langEN" name="language" checked>
<label for="langFR" style="width: 300px"> French </label>
<input type="radio" id="langFR" name="language">

<div lang="en" class="content">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div lang="fr"  class="content">
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum a été le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de caractères et l'a brouillée pour en faire un livre de spécimens. Il a survécu non seulement cinq siècles, mais aussi le saut dans la composition électronique, demeurant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec un logiciel de publication assistée par ordinateur comme Aldus PageMaker comprenant des versions de Lorem Ipsum.
</div>