Streaming live at 10am (PST)

Word spacing bug when collection data


#1

Weird bug:

  • On this page https://www.cphpix.dk/buster/busterinfo/om the intro text is coming from the CMS.

  • On mobile the word spacing renders very low, so words flow together. Only here. Any custom CSS does not affect the field, only if we duplicate and detach it from the collection.

  • So we have no way to edit the word spacing on this one, but on the Rich text fields below we can!

No logic to this… Anyone experienced anything similar?


(sorry can’t share a read only link for this site, due to contract restrictions)


#2

Hi @Fagerlund

Thanks for posting about this. I’m not sure I fully understand the issue, though.

I took a look at that page and the intro text appears as expected on both mobile and desktop views. If you are seeing other behavior on your end, can you send me a screenshot or recording of what you see (CloudApp or Quicktime work well)?

Could you also please let me know what browser version you’re using by sending me your information from this page?

There should be a small share link when you visit the page which you can send to me.

​Thanks in advance!


#3

Hi Brando

The issue is very clear on mobile. On Chrome it is worst, but the same goes for Safari. I use iPhone X with all updates installed, also latest browsers.

See this image to illustrate the bug: Above is a copy of the text field below, only with manual text: below is the version, that receives text from the CMS. Adding word-spacing to the code does NOT affect either of the two, but we can easily affect the paragraph below, that also receives text from a collection. No custom code whatsoever affects the text. It is a text field, and we gave it the class of “manchet”.

Any ideas?


#4

Hi @Fagerlund

One of our engineers tested the spaces used in that paragraph and it looks like it’s not a normal space.

Instead, the space looks like a Unicode Decimal Code  

http://www.codetable.net/decimal/8200

If you manually retype this paragraph in the collection item itself, this will resolve the issue.

This unicode char could have appeared if you copy / pasted this paragraph from a different application. I recommend using Google docs when doing this as there aren’t any odd styles / symbols like this carried over.

Hope this helps!


#5

Hi @Brando
That was it! I have now restored my sanity… of course it was a little space, not as big as a normal space, that you couldn’t see. Of course it was :smiley:

Thank you so much!
/Jesper