CODEWITHSUNDEEP
htmlcsssafarimobile-safari
Andrew Fan
Andrew Fan

Reputation: 1321

Why does Safari split certain phrases onto separate lines?

Alt Question Name: Why does Safari think that 'Needham Line' in Source Sans Pro should be treated specially?

Description:
I am making a website and for some reason, Safari 13.0.4 on macOS Mojave 10.14.6 has decided that 'Needham Line' must have a line break. It doesn't matter where in the div the text is, and it doesn't matter what screen width is being used. In addition, changing the words - "Needhaw Line" or "Needham Lines" or "Needham L" fixes the issue entirely.

This issue does not seem to occur with fonts other than Source Sans Pro, and I cannot replicate it on Chrome or Firefox.

Below are screenshots showcasing the issue:

  1. Standard View Standard View
  2. Smaller Width Smaller Width
  3. None after Nothing After

As noted prior, changing the font or the text itself results in this problem not appearing.

  1. Helvetica used instead of Source Sans Pro Helvetica
  2. Alt Text 1 Alternate Text 1
  3. Alt Text 2 Alternate Text 2

And finally, it doesn't seem to matter where the position is in order to trigger the bug.

  1. Different position among divs Different Position

In order to provide a complete Reprex, I would normally paste the entirety of the code here, but there are JavaScript dependencies so I've put everything into a JSFiddle here (though this is a stripped down example, so please excuse the code quality). Note that the load type for this MCVE should be "No Wrap - Bottom of Body".

https://jsfiddle.net/Sparen/41e5msjL/4/

The raw HTML is below - I've copy-pasted other lines and changed the text, switched between text encodings, etc, and none of that seemed to have an effect.

      <div class="toc_subdiv_line"><div class="toc_subdiv_hd"><a href="#sub3">MBTA Commuter Rail</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_newrock"></div> • <a href="#line_mbta_newrock">Newburyport/Rockport Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_haver"></div> • <a href="#line_mbta_haver">Haverhill Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_lowell"></div> • <a href="#line_mbta_lowell">Lowell Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_fitch"></div> • <a href="#line_mbta_fitch">Fitchburg Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_wor"></div> • <a href="#line_mbta_wor">Framingham/Worcester Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_need"></div> • <a href="#line_mbta_need">Needham Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_fair"></div> • <a href="#line_mbta_fair">Fairmount Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_frank"></div> • <a href="#line_mbta_frank">Franklin Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_provstough"></div> • <a href="#line_mbta_provstough">Providence/Stoughton Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_midlake"></div> • <a href="#line_mbta_midlake">Middleborough/Lakeville Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_kingply"></div> • <a href="#line_mbta_kingply">Kingston/Plymouth Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_greenbush"></div> • <a href="#line_mbta_greenbush">Greenbush Line</a></div>
       </div>

My current suspicion is that there is something incredibly specific about the font type, font size, and widths of the characters making up "Needham Line" that is causing Safari to behave this way. Or hey - it might be something else entirely.

If anyone has any ideas about why this behavior occurs, I'd greatly appreciate it if you could explain. In addition, if there is a workaround other than changing the text content/using a non-breaking space, it would also be greatly appreciated.

Safari 13.0.4 on macOS Mojave 10.14.6

EDIT: Tested on iOS. My worst fears have come true - this issue can be perfectly replicated on mobile Safari (iOS 13.2.3). By definition, this means that pretty much all iOS browsers exhibit this issue. And it looks just as unusual on Mobile as it does on Desktop.

Upvotes: 1

Views: 1359

Answers (2)

danqing
danqing

Reputation: 3668

I'm inspired by pfamach's answer that changing the first letter of the word prevents the issue from happening.

Obviously, you can't just change the first character. What you CAN do is to add a zero-width character in front, which fixes the problem and doesn't change the look of your text at all.

Still hacky, but I think it's a better solution than white-space: nowrap;.

Upvotes: 2

pfarnach
pfarnach

Reputation: 121

I'm also seeing this with Safari 14.0.1 on macOS (screenshots here https://i.sstatic.net/ctOys.jpg). Changing the first letter of the word to any other character prevents the issue from happening. One thing that's especially strange is that highlighting the text when it's broken across two lines makes the text from the second line appear duplicated on the first line.

This isn't an especially satisfying solution, but adding white-space: nowrap; resolved the issue in my case.

Upvotes: 0

Related Questions