On 2012-02-15 15:06, Vladimir Panteleev wrote:
On Wednesday, 15 February 2012 at 12:44:22 UTC, Jacob Carlborg wrote:
I really like this behavior but noted a couple of things. Take this
for example:
http://imageshack.us/f/140/dfeediphone.png/
This is an image from the iPhone simulator. As you can see, the text
in the top post overflows the design to left. The reason for this
seems to be because of links that don't get wrapped. It only wraps at
word boundaries and some characters like "-". These links also causes
the text size to become smaller sooner then it seems to have.
An idea to fix this would be to use the CSS3 property "word-break":
http://www.w3schools.com/cssref/css3_pr_word-break.asp
It looks like it will break on any character indiscriminately, so looks
like it'd need to be applied selectively.
Exactly, it should only be applied to links.
There's no way to get it to
prefer breaking on whitespace/punctuation, but resort to breaking at
arbitrary points otherwise?
It don't think so.
An other idea, that would work for basically all browsers, would be to
add zero-width spaces to the links:
http://en.wikipedia.org/wiki/Zero-width_space
I'm wary of magical characters because they may end up in text copied by
the user. For example, what if someone posts a code sample that contains
a long string of alphanumerics?
It depends on where you paste it. Copying a string containing a
zero-width space and pasting it in TextMate results in a visible space.
If I instead paste it in TextEdit there's no visible space. I tried a
few other applications as well and there was no visible space in those.
--
/Jacob Carlborg
