“white-space: pre” prevents words from wrapping in tweet bodies

[bdesham]

I use Granary to generate a JSON Feed for the Twitter account of the Buffalo office of the National Weather Service. This tweet is rendered poorly in Reeder for Mac and iOS: all of the text is put onto one line. This happens because the line has the rule white-space: pre applied, as you can see in the content_html in the JSON Feed entry:

<div style="white-space: pre">Here are some experimental Lake Effect Snow Warning polygons, which narrows down the place and time. The warning for WNY runs from 7PM Friday to 1PM Monday, but we've broken it down into for segments.  For more info, see:
<a href="https://www.weather.gov/buf/lespolygon">weather.gov/buf/lespolygon</a></div>
<p>
<a class="link" href="https://twitter.com/NWSBUFFALO/status/1603518606997716992">
<img class="u-photo" src="https://pbs.twimg.com/media/FkDXqYSUEAEWrFr.png" alt="" />
</a>
</p>
<p>
<a class="link" href="https://twitter.com/NWSBUFFALO/status/1603518606997716992">
<img class="u-photo" src="https://pbs.twimg.com/media/FkDXqYrUUAA0Rjg.png" alt="" />
</a>
</p>
<p>
<a class="link" href="https://twitter.com/NWSBUFFALO/status/1603518606997716992">
<img class="u-photo" src="https://pbs.twimg.com/media/FkDXqZIUUAApaGj.png" alt="" />
</a>
</p>
<p>
<a class="link" href="https://twitter.com/NWSBUFFALO/status/1603518606997716992">
<img class="u-photo" src="https://pbs.twimg.com/media/FkDXqZhUYAAnKPA.png" alt="" />
</a>
</p>

I’m guessing that this style is applied as a result of there being multiple images; other tweets in the feed that have just one image don’t show this rendering problem. In this particular case the desirable thing would be to replace the newline after “see:” with a <br> tag, and to get rid of the white-space: pre, but I know that Twitter and HTML have different ideas of which whitespace should be preserved and I assume this is a way of getting the former’s rules in the latter’s context.

[snarfed]

Hmm! Do you mean that Reeder doesn't wrap it, so it gets truncated? Does it not let you scroll horizontally to see the rest? That's surprising if so. I looked at it in a few other similar renderings:

• Firefox keeps it all on one line, only breaking after "see:" but lets me scroll horizontally to see the whole line
• Monocle preview wraps, screenshot below
• Newsblur web wraps, screenshot below
• Newsblur Android wraps, will add screenshot

[snarfed]

(Oh, and yes, the reason for white-space: pre is to preserve the formatting of non-HTML sources like Twitter. This is surprisingly difficult, we iterated on it a fair amount a long time ago, I'm sure it's still not perfect, but it's definitely been through some debugging and testing.)

[bdesham]

This is how it looks in Reeder on iPadOS:

A separate UI decision in that app means that trying to scroll to the right will instead slide in a web view showing the Twitter page.

I agree that this is user agent–specific… in the Feedbin web interface in Firefox, the text is wrapped normally. Reeder’s behavior of preserving all of the white space does seem correct to me, in some by-the-book sense, but if this works okay basically everywhere else then I’m fine closing this ticket 🙂

[bdesham]

That being said, most of the articles in the feed omit the white-space: pre and render just fine in Reeder. Any idea why some of the feed items include this and others don’t?

[snarfed]

Good question! I also looked more deeply, and we actually had this problem in Atom a while ago and fixed it in 0ac5436, but didn't apply the same fix to JSON Feed, which we admittedly pay less attention to. I'll do it there too!

[snarfed]

^ deployed this fix, @bdesham feel free to try!

[bdesham]

It looks like Feedbin is caching the older version of the post, so I can’t test this in Reeder itself, but the JSON Feed looks great now! Thanks so much 🎉