nylas-mail icon indicating copy to clipboard operation
nylas-mail copied to clipboard

Rich Text Formatting in Composer: Fonts, Sizing, Quotes, Styles, Colors, Headings, Tables, etc.

Open emorikawa opened this issue 8 years ago • 31 comments

This is a commonly requested feature to add rich text formatting options to the composer.

This will likely take the form of a separate plugin to add this functionality. We believe the stock N1 composer should be a minimal, simple, and clean editor.

emorikawa avatar Jan 20 '16 18:01 emorikawa

is this plugin available ?

saqebakhter avatar Feb 24 '16 17:02 saqebakhter

Now that we have Markdown, I think a number of these items have been addressed. However, true rich text formatting, with features like font face, color and size (outside of headers) are still absent. Should this thread be modified to reflect that update?

rasterbate avatar Feb 29 '16 14:02 rasterbate

@rasterbate where's markdown ?

saqebakhter avatar Feb 29 '16 14:02 saqebakhter

What I would like to see is a Google web fonts plug-in, or similar.

As most people are online these days and with so many fonts available this does not rely on the receiving client having the font installed.

Not sure if this is particle but worth looking at.

molstrangler avatar Mar 02 '16 13:03 molstrangler

Having web fonts embedded doesn't sound like such a good ideia, I could be wrong. What bothers me is that due to the lack of font control, sending from mac to windows, the message gets displayed in Times New Roman on the windows side. That is quite ugly. Would be really helpful here if we could have some basic control over safe fonts, color and size.

lmartins avatar Mar 02 '16 14:03 lmartins

Web fonts are not embedded, from what I understand they are referenced in html and displayed. The advantage being no matter the OS platform the font should be rendered the same. The only disadvantage is the performance hit as they are webfonts.

But most have good enough Internet speed to handle it.

Add this code to your website:

<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

Integrate the fonts into your CSS:

font-family: 'Ubuntu', sans-serif;

molstrangler avatar Mar 02 '16 16:03 molstrangler

If you paste this into one of your N1 signature text boxes in the 'Edit RAW html' mode and the gently click on 'Edit live preview'. if by magic you get your Signature in Ubuntu font:

    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu">
  <style>
    text {
      font-family: 'Ubuntu', serif;
      font-size: 18px;
    }
  </style>
<text>
  <div>This is my email signature</div>
</text>

You can also play with font styles:

text-shadow: 2px 2px 3px #aaa;

  • I composed a new email and it looks just fine.
  • When I opened the received email in N1 it looked fine.
  • When I looked at the email on my iPhone it also looked OK.

I'm no coder myself but I think this should prove that using web fonts is a viable way forward.

molstrangler avatar Mar 03 '16 08:03 molstrangler

And using multiple fonts and effects:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+500">

<style>
#signame {
   font-family: 'Open Sans', serif;
   font-weight: bold;
   font-size: 14px;
   background-color:white;
   color:black;
   text-align:left;
}
#sigfixed {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   background-color:white;
   color:grey;
   text-align:left;
}
</style>

<text>
<div id=signame>Your Name</div>
<div id=sigfixed>Mobile:   Your mobile</div>
<div id=sigfixed>Linkedin: Your url</div>
</text>

molstrangler avatar Mar 03 '16 09:03 molstrangler

Im curious how will that work out with email clients such as Gmail and Outlook. For me personally the way it my messages are shown in Outlook is much more of problem than a nice to have custom font solution.

To illustrate the problem, here's how the messages are displayed: nylas to outlook

To be fair this is not exclusive to N1. Apple Mail has the same problem and one way to get around it is by installing a plugin that adds the font formatting on sending emails. Hopefully though, this is something that can be solved natively in N1.

lmartins avatar Mar 03 '16 09:03 lmartins

Having experimented some more N1 needs to have some dedicated

so the user can use multiple web fonts in their sig. I think this would also need to be adopted if the user is to use multiple fonts in the body of the email message sometime in the future.

The problem I encountered was sigs are being duplicated when I composing a new email and selected to send from a different account. So I think this is a bug cuz N1, maybe connected with my defining some

and the way N1 handles switching between different sending account.

To recreate this just copy & paste the second html code into multiple email account signatures and compose a new email, then switch the sending email account.

I'm using Windows10

molstrangler avatar Mar 03 '16 09:03 molstrangler

Outlook accepts HTML email, right now I don't have access to Outlook so it's simple for someone with Outlook to test.

Note: Outlook has always been very poor at handling html email. Of course it is possible to know what email client someone is using once you have an email from them. The email client being used is encoded into the email itself.

If someone where to spend some time (and lots of effort) is maybe possible to adapt emails being sent to Outlook clients to look better. And further it maybe possible to create a lookup table for all popular email clients so N1 do some substitution to make your email to retain as much look & feel as possible.

molstrangler avatar Mar 03 '16 10:03 molstrangler

@rasterbate mentioned with a recent release there is now Markdown support. I'm not seeing that anywhere in settings, or in the plugin list. Is it true that Markdown is supported, and if so, how can I enable it?

JacobDB avatar Mar 07 '16 19:03 JacobDB

+1

Coder-256 avatar Mar 30 '16 00:03 Coder-256

draftjs.com

roughsoft avatar Apr 03 '16 14:04 roughsoft

Markdown support was there, but doesn’t seem to work anymore in the current version. Has this been removed?

enoversum avatar May 02 '16 13:05 enoversum

@enoversum We've never had full Markdown support, but the issue with the bullets/numbering (#1973) is fixed and should be released soon!

jackiehluo avatar May 02 '16 18:05 jackiehluo

@jackiehluo Oh well, at least lists were working, :blush: .

enoversum avatar May 02 '16 21:05 enoversum

Not so fussed about complete Rich Text formatting but a definite +1 for color formatting. Make in-line replies much easier to compose as well as referencing previous emails etc.

johnend avatar Jun 03 '16 10:06 johnend

Can anyone at Nylas give a rough estimate of if/when this feature is likely to be released?

martsa1 avatar Jun 15 '16 17:06 martsa1

Before complete rich text editor , can nylas provide minimal text coloring like thunderbird. I think that would be a good start instead of caring lot about fonts.

santhosh-v avatar Jun 18 '16 17:06 santhosh-v

Another request: https://nylas.zendesk.com/agent/tickets/4517

One last thing, I'd love a format option, so as to give size and color to the text. I know not every uses it, but it is common for me and many people to answer emails that present questions or many topics with the phrase "see my answers in red", and write the answer in color below each of the points that the other person in bringing up. Since I switched to Nylas N1, I cannot do that anymore, or, when we're discussing something and everyone is doing that, I have to power up the Mac to participate in the conversation.

jackiehluo avatar Jul 12 '16 07:07 jackiehluo

At least a "remove all formatting" button is a priority. I experience serious bugs when copy-pasting stuff into e-mail body. The issue is claimed to be closed and "fixed in 0.3.29", but it often makes writing messages impossible for me, forcing me to resort to Inbox/Gmail.

Mainly an e-mail signature from about.me misbehaves 'oribbly, creates invisible tables when trying to delete it, creates unremovable invisible lines, even interferes with other parts of the text. Most 'orrible thing I experienced was random letters in an active URL being changed color after every key stroke.

To overcome these serious issues, I propose that at least the "remove formatting", or "edit message HTML" should be provided with priority.

(I use Fedora 24 Workstation 64bit with all the updates and Nylas 0.4.45-7637265 from repo.)

ghost avatar Jul 18 '16 09:07 ghost

Another request for custom fonts from Zendesk

jstejada avatar Jul 20 '16 17:07 jstejada

Another request: https://nylas.zendesk.com/agent/tickets/5189

hallamoore avatar Jul 20 '16 17:07 hallamoore

Another request: https://nylas.zendesk.com/agent/tickets/5617

jackiehluo avatar Aug 15 '16 18:08 jackiehluo

Another request: https://nylas.zendesk.com/agent/tickets/5887

hallamoore avatar Aug 31 '16 18:08 hallamoore

another request: https://nylas.zendesk.com/agent/tickets/6832

jstejada avatar Oct 24 '16 18:10 jstejada

I must admit this email client is great already, but fonts need some sort of improvement.

A basic clear formatting button, and an option to convert between html and text is a must. Changing a default font and default size is also much needed for everyone... is there a way we can change it by editing some config file?

peixotorms avatar Apr 14 '17 11:04 peixotorms

+1

benjamin-wss avatar Jul 18 '17 16:07 benjamin-wss

+1 to the 'clear formatting' button, if nothing else.

mjchamplin avatar Aug 30 '17 01:08 mjchamplin

+1

blackbart420 avatar Oct 09 '17 13:10 blackbart420