Inky adding space below rows (zero width joiner, &zwj)

At the end of each row, a &zwj character is being inserted and forcing down content when I want to have no additional spacing. Where can I customize and remove the &zwj or zero width joiner character?

Please provide the needed steps to reproduce this, for example using an example repository.

I am not aware of this case, that we add a zero-width joiner character.

This is happening out of the box with the starter files, using Sass version if that matters. I start up a new project folder and install foundation emails ($ foundation new --framework emails), then run ‘npm run build’ to compile all the files from the src to dist. The starter html templates in the dist folder all have ‘&zwj’ characters placed in them. For example, the src marketing.html has 5 <row>'s, then after compiling the dist marketing.html has 5 ‘&zwj’

Maybe a better question is why do <th class=“expander”…> get injected, and how can I avoid that if needed?

I’m also seeing these spaces added because of a zwj added. See:

Temporary fix is to remove this zwj; from the row component.

1 Like

yep, that seems like what I’m looking for. thanks will!

Ah, yes this is a workaround and solution that is obviously needed.

Due to quirks in different (older) email clients, this and other “hacks” are needed.

Not sure if this is still the case with Outlook 2016 and if we need zwnj or zwj.

Thanks for providing the steps. This makes it easier for us to reproduce such issues.

Same here, solved editing directly the file lib/componentFactory.js from node_modules/inky.
Not a good practice but solved for my current development, thanks @willtate

Upon updating to 2.3.1 I saw the same &zwj; issue.

For now I have added the below in to the gulpfile inliner function as a workaround
.pipe($.replace, "&zwj;","")

1 Like

As mentioned in the commit it should resolve Otlook 2016 issues.

Do you really see it in the rendered html in the browser(s)? Because I don’t see it in browsers. You can ignore it in the source as it is needed to fix issues with specific email clients.

Correct, I do see them in browser or rather the unwanted space they are adding.

Example below

So there is no padding or (emulated) margin there?

Should we revert the commit?


No padding or margin between the row(s) I’m afraid.

I am unfamiliar with the Outlook &zwj; hack (and what it fixes) so I can’t suggest an alternative. It seems that while &zwj; takes up no horizontal space it does take up vertical space (1 character) and it is this that is adding the space.

I have found a work around for this by removing the entity on build, so I am not screaming for a revert.

While the entity is there it will not be possible to have a element after a <row> without a line break in-between them.

Then we should revert it, it seems it causes more problems that it solves.

I was having the same issue and was able to solve it the same way @damongolding did by updating the gulpfile to replace &zwj; with an empty string.

In addition to adding the extra space in the browser and clients, it was also throwing some errors in our implementation of inky as well. Removing the &zwj; fixed both the extra space issue and render error.

We have reverted the change. So it should be resolved with the next release.

You can also use patch-package to remove it from the corresponding file in inky.

I just published Inky v1.4.2 with these changes reverted. This was added back in 2017 in order to fix something in Outlook 2016. However, the reasons for this were not documented very well. If we ever need it again, we can do more research into it.

1 Like