0

Picture: How ­ adds a hyphen in safari vs chrome The problem is the extra hyphen after the period in the red square on safari side.

There seems to be a problem with the usage of ­ in Safari browsers and I'm not sure how to fix this. On some breaks where a ­ is used, I get another hyphen added after the broken word (as is seen in the linked picture). The issue only exists on mobile Safari browsers in places where the shy-ed word is encountering a break point (as in: an element with not enough width) without breaking, as far as I can see. Can someone please shed some light on why this happens and how one could fix it (except for using another ­)?

.foo{
width: 15px;
}
<html>
  <body>
    <div class="foo">
      <p>This&shy;is&shy;a&shy;very&shy;long&shy;word&shy;with&shy;a&shy;shy&shy;breakpoint.</p>
    </div>
  </body>
</html>

Edit: This question talks about the same issue, doesn't provide a solution for the safari problem, though. Edit2: Added Code snippet, though the reproducability is browser dependent.

J. Samak
  • 1
  • 1
  • 4
  • Does this answer your question? [­ How to get rid of the extra hyphen at the end of word](https://stackoverflow.com/questions/38702209/shy-how-to-get-rid-of-the-extra-hyphen-at-the-end-of-word) – Dave May 05 '20 at 19:22
  • It talks about the same issue, but doesn't have a fix for the safari case, which I'm hoping for. – J. Samak May 05 '20 at 19:41
  • I'm confused. What's wrong with the Safari screenshot? Is it the extra hyphen after the period? Show the code that produces the problem (a [mre]) and someone might be able to better help you. You can likely use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) (icon looks like `<>` in the editor toolbar) to do so. – Heretic Monkey May 05 '20 at 19:50
  • @HereticMonkey yes, the extra hyphen after the dot. The live example that prompted my question is [my website](https://jan-samak.de), it only seems to be reproducable on mobile safari browsers. The snippet I added should also do the same. – J. Samak May 05 '20 at 20:14
  • You could report it to Apple in case of a browser bug, so in next releases it can be fixed. https://www.apple.com/feedback/safari.html – Dave May 05 '20 at 20:44
  • Note; a more simple test case is a single word with a single shy. I used `infor­mation`, and it placed an extra hyphen after the word. – Heretic Monkey May 05 '20 at 20:48
  • @Dave Thanks, probably gonna do this. – J. Samak May 06 '20 at 15:24

0 Answers0