Mjml: Allow for meta definition in the HTML head

[arnaudbreton]

Following up on issue #19, we want to provide MJML users with a way to define meta information in the HTML head section. The idea here is to discuss openly here and to settle on a final implementation by the end of the week.

In the new mj-head tag introduced (see #78), the behaviour of mj-raw tags will be to output its content in the final rendered HTML. No validation is done here by the MJML rendering engine.

<mj-head>
    <mj-raw>
        ...
    </mj-raw>
</mj-head>

[debiasej]

I would like to change the meta tag. For this I add a mj-raw tag in the mj-headbut it doesn't seem to work.

<mj-head
    <mj-raw>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    </mj-raw>
</mj-head>

Is it possible to do that?

[Marvin256]

Same thing for me, I would like to add this for Outlook 2013-2016 in the to avoid Times New Roman font when using custom font-family:

<!--[if mso]>
        <style type="text/css" media="all">
          body, table, td, span {font-family: Helvetica, Arial, sans-serif !important;}
        </style>
<![endif]-->

[iRyusa]

It's in the mid term roadmap for MJML, you check it here : https://github.com/mjmlio/mjml/projects/1#card-635717

@Marvin256 It's an other issue but it shouldn't fallback to Times New Roman when using a custom font. Did you try to set default font-family attribute with mj-attributes & mj-all?

[Marvin256]

Thank you for your answer @iRyusa, mj-all isn't working for this particular issue. See this post from Litmus for more information : https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman

Just tried to add a mj-raw in the mj-container and Outlook is aplying the good font.

Here's the code for those having the issue :

      <mj-raw>
        <!--[if mso]>
        <style type="text/css" media="all">
          body, table, td, span {font-family: Helvetica, Arial, sans-serif !important;}
        </style>
        <![endif]-->
      </mj-raw>

[iRyusa]

@Marvin256 It should, I just tried with Ubuntu : https://mjml.io/try-it-live/BJP0kzzWg and it renders as Arial on Outlook.

It only fallbacks to Times when custom font are imported. In MJML we're excluding every custom fonts imported for outlook with conditionnal comment to avoid this behaviour, so font-family will be applied correctly

[dimitarnestorov]

@debiasej I was able to do it, though quite painfully and poorly
Not sure how you run MJML, but I'm using Node and I can simply register a new MJ Head element

var mjml = require('mjml');
mjml.registerMJHeadElement("mj-meta", function(element, args){
    args.container = args.container.replace("</head>", '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"></head>');
});

And then inside the head I added

<mj-head>
    ...

    <mj-meta />
</mj-head>

For Grunt users: works with grunt-mjml if you put that code before grunt.loadNpmTasks("grunt-mjml");
Will probably work with Webpack too

[iRyusa]

You should add a </head> at the end of your replace @dimitarnestorov but that's a way to fix it atm

[dimitarnestorov]

@iRyusa
Thanks for the heads up.
I looked at the result though. Has a </head> even though I missed it 😅
In that case, you've made on hell of a framework!

[dalefish]

Quick hack for this:

v3.3.0 and above

Kind Regards,

:----------------------------:
Dale McConnell

On 4 April 2017 at 03:49, Dimitar Nestorov [e-mail] wrote:

@iRyusa https://github.com/iRyusa
Thanks for the heads up.
I looked at the result though. Has a even though I missed it 😅
In that case, you've made on hell of a framework!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/82#issuecomment-291369520, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AKxLOELkio-eomqTP3asF9Fao0yDgzbGks5rsaHDgaJpZM4HfgM_
.

[matiasm]

We had been using the above </style> hack to add things to our head, but this broke in at least 4.1.1 because of the parser - and even 4.0.5 (which we had been using) has its dependencies on 4.1.1+ so we couldn't simply pin our version to 4.0.5.

A hack to the hack is to perform the same pattern but on the title tag:

<mj-title>
  {{ title }}
  </title>
  <!-- just <head> things -->
</mj-title>

which doesn't seem to break the parser in the same way as the original hack. Hopefully helps anyone wanting to use this before the <mj-raw> option is available!

[kmcb777]

Hi @matiasm you can now use mj-raw in the mj-head so this hack isn't needed anymore in the new release mjml4.2-beta, which you can install with npm install mjml

[donni106]

With 4.3 I still have the error

mj-raw cannot be used inside mj-head, only inside: mj-attributes, mj-body, mj-column, mj-group, mj-section, mj-wrapper):

So still need a hack to realize a meta-tag in the head (#1338).

[iRyusa]

You most likely have some version conflicts, try a clean install of mjml first

[donni106]

Sorry, no change after removing and adding mjml again.

[iRyusa]

Just tried with a clean install of mjml and it works just fine. Can you detail a bit your setup ( do you have mjml installed globally ? ), node version, npm/yarn versions, os, the way you compile mjml files ?

[tkafka]

I just got the same with 4.3, it used to work with 4.2:

mj-raw cannot be used inside mj-head, only inside: mj-column, mj-attributes, mj-body, mj-group, mj-section, mj-wrapper

I call project-local mjml like this:

./node_modules/.bin/mjml ./mjml-templates/$TEMPLATE.mjml -o ./html-output/$TEMPLATE.html --config.keepComments=0 --config.validationLevel=strict

In my package.json I have

  "dependencies": {
    "mjml": "~4.3.0"
  },

and I install mjml with yarn.

And I am attaching a relevant part of my yarn.lock - all installed components of mjml are 4.3.0.
yarn.lock.txt

[iRyusa]

Oh nvm you're right, it shows the message but it still rendered properly

➜  mjmltest yarn mjml test.mjml
yarn run v1.12.3
$ /Users/maximebrazeilles/mjmltest/node_modules/.bin/mjml test.mjml
Line 3 of /Users/maximebrazeilles/mjmltest/test.mjml (mj-raw) — mj-raw cannot be used inside mj-head, only inside: mj-attributes, mj-body, mj-column, mj-group, mj-section, mj-wrapper
Line 6 of /Users/maximebrazeilles/mjmltest/test.mjml (mj-text) — mj-text cannot be used inside mj-body, only inside: mj-attributes, mj-column, mj-hero
<!-- FILE: test.mjml -->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>
  </title>
  <!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }

    .ReadMsgBody {
      width: 100%;
    }

    .ExternalClass {
      width: 100%;
    }

    .ExternalClass * {
      line-height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if !mso]><!-->
  <style type="text/css">
    @media only screen and (max-width:480px) {
      @-ms-viewport {
        width: 320px;
      }

      @viewport {
        width: 320px;
      }
    }
  </style>
  <!--<![endif]-->
  <!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
  <!--[if !mso]><!-->
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
  </style>
  <!--<![endif]-->
  <style type="text/css">
  </style>
  <------------------- HELLO FROM RAW ---------------->
</head>

<body>
...

[tkafka]

What's even weirder is that mjml (eg. 4.2.0) has all it's dependencies defined as a ^4.2.0, so that even when I specifically request to install "mjml": "4.2.0" (exact version), all installed components (like mjml-body) will be 4.3.0. This might lead to broken installs.

I propose changing dependencies of mjml to include exact component version, so that mjml 4.2.0 will always fetch 4.2.0 version of all components (and if I want eg. 4.2.1, it is up to me to have ~4.2.0 in my package.json, so that [email protected] will be installed, and together with it all 4.2.1 components).

[kmcb777]

This problem has been fixed in 4.3, now all the inner mjml dependencies versions will be exact 👍

[tkafka]

@iRyusa In my case I'm calling mjml like this:

./node_modules/.bin/mjml ./mjml-templates/$TEMPLATE.mjml -o ./html-output/$TEMPLATE.html --config.keepComments=0 --config.validationLevel=strict

(asking it to write to output file instead of writing to stdout) and the output file isn't created, I only get this message:

Error: ValidationError:
 Line 282 of <path to mjml file>.mjml, included at line 5 of file <path to main file>.mjml (mj-raw) — mj-raw cannot be used inside mj-head, only inside: mj-column, mj-attributes, mj-body, mj-group, mj-section, mj-wrapper

Command line error:
Input file(s) failed to render

so my problem is worse - templates that worked in 4.2.0 stopped rendering in 4.3.0.

[iRyusa]

Yeap, for now just remove the strict validation, we'll fix it tomorrow with 4.3.1.

[tkafka]

Ok, thanks!

[donni106]

What's even weirder is that mjml (eg. 4.2.0) has all it's dependencies defined as a ^4.2.0, so that even when I specifically request to install "mjml": "4.2.0" (exact version), all installed components (like mjml-body) will be 4.3.0. This might lead to broken installs.

I propose changing dependencies of mjml to include exact component version, so that mjml 4.2.0 will always fetch 4.2.0 version of all components (and if I want eg. 4.2.1, it is up to me to have ~4.2.0 in my package.json, so that [email protected] will be installed, and together with it all 4.2.1 components).

Yeah! I also encountered this problem for earlier versions.

This problem has been fixed in 4.3, now all the inner mjml dependencies versions will be exact 👍

Nice, thanks!