<Preview> component's space characters are not being rendered properly on some email clients
#609
Comments
|
I am not sure if this is connected to my problem, but after updating to the latest |
|
I had this 'issue' but as far as I can tell, it's actually by design. They're invisible spaces, which is how a 'Preview' feature works - it adds these invisible spaces to stop the body of the email being drawn into the email preview area, e.g. in notifications. Choosing which characters to use, that works across many email clients, is the challenge. These characters don't seem to be compatible with AWS Cognito emails, so what I've done is do a sed find/replace in the email after exporting, replacing them with E.g. in python: email = email.replace("\xa0\u200c\u200b\u200d\u200e\u200f\ufeff", "͏‌  ")This has retained the Preview feature on the few clients I've tested (desktop Outlook, iOS Outlook app) |
|
I think we should escape all of these invisible characters for better compatibility with packages. Can we maybe get an option in the render function to replace with escaped versions? Here is a Typescript function that will help accomplish it in the meantime: const cleanHtml = (component: ReactElement) => {
const emailHtml = render(component);
const invisibleCharacters = {
'\xa0': '͏', // NO-BREAK SPACE
'\u200c': '‌', // ZERO WIDTH NON-JOINER
'\u200b': ' ', // ZERO WIDTH SPACE
'\u200d': '​', // ZERO WIDTH JOINER
'\u200e': '', // LEFT-TO-RIGHT MARK
'\u200f': '‏', // RIGHT-TO-LEFT MARK
'\ufeff': '', // ZERO WIDTH NO-BREAK SPACE
};
return emailHtml.replace(
/[\xa0\u200c\u200b\u200d\u200e\u200f\ufeff](?! )/g,
(match) => {
return invisibleCharacters[match];
},
);
}; |
<Preview> component's space characters are not being rendered properly on some email clients
|
@rretlaw Could your issue be related to your font not supporting the characters we use for the white spaces? I've also tested this on Gmail but can't really replicate the same issue. |
Describe the Bug
On rendering React Emails that are using the tag, I'm getting a large string of unreadable characters ([U+200E][U+200F]).
My setup is using CSS for formatting. I have each email created in seperate .jsx files and importing the components into a main MainEmail.jsx page for rendering and processing. In my preview, I do not see the unreadable characters as they show as regular spaces. (See below):
However, when the email is sent, the unreadable characters show up as [?]. Below is an example of the same text above where I copied the above text into a text document. I've attached a screenshot of Gmail where it shows the unreadable characters as well as VSCode showing the value of the characters.
Setup: My app was built using Create React App and hasn't been migrated to Nextjs yet. Using Tailwind for CSS for the entire app. I installed the React Email components using npm inside VSCode into my larger project.
I installed all React Email components using the npm install @react-email/components -E commands vs. installing each component seperately. Therefore enabling me to import all with 1 import command vs. having seperate import commands for each component.
In terms of sending emails, I'm currently saving each rendered HTML file as a file on Azure and calling up the file via a backend process to fill in dynamic variables and the sending via C#. I do not yet have an operational Email provider as I'm looking to use Resend once C# becomes available.
I'm seeing this issue in the following email clients: Gmail Web, Yahoo Web, Outlook Web, Outlook Desktop (mac), Yahoo App for IPhone. If needed, I can provide more screenshots.
Render Command in React:
Let me know if you need any additional info regarding configuration.
Which package is affected (leave empty if unsure)
@react-email/preview
To Reproduce
Below is an example react email I'm building. I have separate components built for the Email Header and Footers but otherwise just straightforward React with Tailwind.
Expected Behavior
Expect the unreadable characters to not be present and thus in Email previews, it shouldn't show the ??????.
What's your node version? (if relevant)
v16.14.2
The text was updated successfully, but these errors were encountered: