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. There's no way to
get it to prefer breaking on whitespace/punctuation, but resort
to breaking at arbitrary points otherwise?
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?
