Allow for meta definition in the HTML head #82

arnaudbreton · 2016-02-22T12:23:04Z

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>

The text was updated successfully, but these errors were encountered:

debiasej · 2016-11-06T22:30:32Z

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 · 2016-11-10T13:50:04Z

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 · 2016-11-10T14:00:54Z

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 · 2016-11-10T15:00:07Z

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 · 2016-11-10T15:32:40Z

@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 · 2017-04-03T22:44:55Z

@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 · 2017-04-03T23:10:53Z

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

DimitarNestorov · 2017-04-04T01:49:52Z

@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 · 2017-04-04T06:46:20Z

Quick hack for this: v3.3.0 and above <mj-style> </style> <meta ....> <meta ....> </mj-style> Kind Regards, :----------------------------: Dale McConnell

…

On 4 April 2017 at 03:49, Dimitar Nestorov ***@***.***> wrote: @iRyusa <https://github.com/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! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#82 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKxLOELkio-eomqTP3asF9Fao0yDgzbGks5rsaHDgaJpZM4HfgM_> .

matiasm · 2018-08-02T10:41:38Z

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 · 2018-09-13T13:39:14Z

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 · 2019-01-07T13:27:04Z

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 · 2019-01-07T13:29:03Z

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

donni106 · 2019-01-07T13:40:44Z

Sorry, no change after removing and adding mjml again.

iRyusa · 2019-01-07T13:44:24Z

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 · 2019-01-07T14:22:36Z

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 · 2019-01-07T14:29:59Z

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 · 2019-01-07T14:33:04Z

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 · 2019-01-07T14:36:03Z

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

tkafka · 2019-01-07T14:39:44Z

@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 · 2019-01-07T14:40:59Z

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

tkafka · 2019-01-07T14:41:16Z

Ok, thanks!

donni106 · 2019-01-07T15:05:16Z

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!

arnaudbreton added the RFC label Feb 22, 2016

arnaudbreton mentioned this issue Feb 22, 2016

Adding extras fonts and extra styles #19

Closed

iRyusa added this to the 2.4 milestone Jul 8, 2016

iRyusa added Under-review and removed Under-review labels Aug 25, 2016

ngarnier removed this from the 2.4.0 milestone Aug 26, 2016

iRyusa mentioned this issue Sep 14, 2016

Responsive font-size? #352

Closed

ngarnier mentioned this issue Oct 21, 2016

mj-raw in the head #423

Closed

iRyusa mentioned this issue Nov 10, 2016

Add an mjml root tag to separate the content and the meta definition #78

Closed

iRyusa mentioned this issue Dec 5, 2017

conditional statements in mj-head doesn't work #907

Closed

ngarnier removed the RFC label Feb 28, 2018

ngarnier mentioned this issue Mar 8, 2018

[Feature Request]: AMPHTML #1029

Closed

ngarnier added this to the 4.2.0 milestone Apr 24, 2018

kmcb777 closed this as completed in 115af24 Aug 16, 2018

iRyusa mentioned this issue Sep 3, 2018

<mj-raw> in <mj-head> doesn't work (content of mj-raw doesn't appear in rendered <head>) #1338

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow for meta definition in the HTML head #82

Allow for meta definition in the HTML head #82

arnaudbreton commented Feb 22, 2016

debiasej commented Nov 6, 2016

Marvin256 commented Nov 10, 2016 •

edited

Loading

iRyusa commented Nov 10, 2016

Marvin256 commented Nov 10, 2016

iRyusa commented Nov 10, 2016

DimitarNestorov commented Apr 3, 2017 •

edited

Loading

iRyusa commented Apr 3, 2017 •

edited

Loading

DimitarNestorov commented Apr 4, 2017

dalefish commented Apr 4, 2017 via email

matiasm commented Aug 2, 2018

kmcb777 commented Sep 13, 2018

donni106 commented Jan 7, 2019 •

edited

Loading

iRyusa commented Jan 7, 2019

donni106 commented Jan 7, 2019

iRyusa commented Jan 7, 2019

tkafka commented Jan 7, 2019 •

edited

Loading

iRyusa commented Jan 7, 2019 •

edited

Loading

tkafka commented Jan 7, 2019 •

edited

Loading

kmcb777 commented Jan 7, 2019

tkafka commented Jan 7, 2019 •

edited

Loading

iRyusa commented Jan 7, 2019

tkafka commented Jan 7, 2019

donni106 commented Jan 7, 2019

Allow for meta definition in the HTML head #82

Allow for meta definition in the HTML head #82

Comments

arnaudbreton commented Feb 22, 2016

debiasej commented Nov 6, 2016

Marvin256 commented Nov 10, 2016 • edited Loading

iRyusa commented Nov 10, 2016

Marvin256 commented Nov 10, 2016

iRyusa commented Nov 10, 2016

DimitarNestorov commented Apr 3, 2017 • edited Loading

iRyusa commented Apr 3, 2017 • edited Loading

DimitarNestorov commented Apr 4, 2017

dalefish commented Apr 4, 2017 via email

matiasm commented Aug 2, 2018

kmcb777 commented Sep 13, 2018

donni106 commented Jan 7, 2019 • edited Loading

iRyusa commented Jan 7, 2019

donni106 commented Jan 7, 2019

iRyusa commented Jan 7, 2019

tkafka commented Jan 7, 2019 • edited Loading

iRyusa commented Jan 7, 2019 • edited Loading

tkafka commented Jan 7, 2019 • edited Loading

kmcb777 commented Jan 7, 2019

tkafka commented Jan 7, 2019 • edited Loading

iRyusa commented Jan 7, 2019

tkafka commented Jan 7, 2019

donni106 commented Jan 7, 2019

Marvin256 commented Nov 10, 2016 •

edited

Loading

DimitarNestorov commented Apr 3, 2017 •

edited

Loading

iRyusa commented Apr 3, 2017 •

edited

Loading

donni106 commented Jan 7, 2019 •

edited

Loading

tkafka commented Jan 7, 2019 •

edited

Loading

iRyusa commented Jan 7, 2019 •

edited

Loading

tkafka commented Jan 7, 2019 •

edited

Loading

tkafka commented Jan 7, 2019 •

edited

Loading