Best answer

Google Calendar Event Description: basic HTML text line spacing

  • 13 March 2023
  • 8 replies
  • 996 views

Userlevel 3
Badge +3

Hello,

Context: when setting up a Google Calendar event, I use basic HTML for the "Description" text field. E.g. <br> to separate lines of text and <ul></ul> for unordered <li> list items </li>

This used to format things nicely with what looked like single-line spacing.

Today a client asked me to update a Zap and now, when I use the same basic HTML approach, the resulting Description text comes through double-spaced.

I tried using paragraph tags <p></p> instead of line breaks <br> and am unable to get the single-line spacing.

Anyone know if something changed, or if I am missing something with formatting Google Calendar description text?

An example oof what used to render as single spaced:

An example of what I am now seeing, double-spaced lines:

 

For example using line breaks:

Here's a line of text<br><br>
Here's another line.<br><br>
<ul><li>first</li>
<li>second</li>
<li>third</li></ul>
Some more text<br><br>
<ul><li>first</li>
<li>second</li></ul>
More text<br><br>
kthxbye<br>

...or paragraph tags:

<p>Here's a line of text.</p>
<p>Here's another line.</p>
<ul><li>first</li>
<li>second</li>
<li>third</li></ul>
<p>Some more text</p>
<ul><li>first</li>
<li>second</li>
<p>More text<br><br>
<p>kthxbye</p>

I end up with spaced out Description text.  Previously it worked just fine to ahieve single-line spacing with the <br> break tags.  🤷🏻‍♂️

Any idea what changed, or what I am doing wrong?

Thanks!

icon

Best answer by Brem 17 March 2023, 00:10

View original

This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

8 replies

Userlevel 7
Badge +14

Hi @mixelpix 

Good question.

The GCal API indicates the Description can contain HTML.

But it appears GCal is now applying additional styling/formatting to the HTML by default.

 

Userlevel 3
Badge +3

Thanks @Troy Tessalone ,

 

Seems like the behavior has changed since I first set things up - about six months ago.  I am unable to find any GCal docs noting as much, but it certainly isn’t unlike them to make changes unannounced & undocumented 🤷‍♂️

Userlevel 3
Badge +3

For those wondering e.g. the API insert action, scroll down to description:

https://developers.google.com/calendar/api/v3/reference/events/insert

Also, a pertinent thread on SO:

https://stackoverflow.com/questions/49307014/html-formatted-text-in-google-calendar-event-description

Userlevel 6
Badge +8

Hey @mixelpix ,

Can you try it with just a single <br> on each line? Here’s how it looks when I do that: https://cdn.zappy.app/45f7a72bfd2f5c8f12d6117b80acdb3c.png

Userlevel 3
Badge +3

@shalgrim  Hi, thanks for the suggestion - apologies, I unintentionaly hit the “answer” checkmark on the mobile version when I got the email notice - possible to undo?  Also, possible to test on your end also including an unordered list with text befoew and after?

I have tried using only the <ul><li> tags, as well as only using a single <br> tag.  I even tried using <html><head><style> attributes to give the <<li> a smaller {margin}, but whichever approach, I end up with everything double spaced.

Of note, when I manually edit the resulting description, there are line breaks in betweem each of the bullet points, which by itself seems like odd behaviior.  Per @Troy Tessalone ‘s answer, it seems that Google is adding some formatting 🤷🏼

Userlevel 4
Badge +6

Hi @mixelpix 

I did find a workaround for you. To get around the double spacing but still use the HTML it looks like you’d need to enter the HTML code without any line breaks. Like this for exampleHere’s a line of text<br>Here’s another line.<br><ul><li>first</li><li>second</li><li>third</li></ul>Some more text<br><ul><li>first</li><li>second</li></ul>More text<br>kthxbye<br>

That would then add a description to the description to the event that appears like this (please click the link). Not ideal as it makes the code a bit harder to read but seems to get rid of the double spacing issue.

I’ll also have our team look into this in Google Calendar as a feature request.

Please give this a shot and let us know how it goes!

Userlevel 6
Badge +8

If I’m understanding right, I got it to kind of work by setting the style of the ul element:

<ul style="margin-top:0;padding-top:0;">

But note that some clients won’t respect that. On the left here you can see the Gmail web client (the way I think you want it) and on the right you can see my desktop fat client (with the space still there): https://cdn.zappy.app/409a99540fbc88c972a4083aeaaffef0.png

So it’s definitely true that different email clients will display the HTML differently.

Userlevel 3
Badge +3

Thank you @Brem - the one-liner approach works like a charm!

 

Thank you as well @shalgrim - I appreciate the help!