Menu
I have a table with variable-width cells, and I want to give the browser the option to insert a line break before a slash, without forcing it. I tried this by inserting a zero-width space (ZWSP) character before the slash, and it works fine in all the browsers I tested it in, except IE6 and IE8.
For IE6, I use some Javascript to replace the character with a <wbr> tag -- not the most elegant solution, but it works.
In IE8, I haven't found a practical way of working around it. It messes up the layout of my table. I found out that it is not limited just to tables. It seems to happen with any kind of element. The browser refuses to acknowledge the ZWSP, choosing instead to let the text flow out of the box, which looks ugly. I have noticed that I can make the browser handle it properly by putting it into compatibility view, but that causes other problems for me.
Does anyone know of a simple and practical way to make the ZWSP behave the way it is supposed to in IE8?
You can use this code to test the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>zwsp test</title>
</head>
<body>
<div style="width: 50px; border: solid black 1px; font-size: 15px">
Miles​/gallon
</div>
</body></html>
596
To remove zero-width space characters from a JavaScript string, we can use the JavaScript string replace method that matches all zero-width characters and replace them with empty strings. Zero-width characters in Unicode includes: U+200B zero width space.
The zero-width space (), abbreviated ZWSP, is a non-printing character used in computerized typesetting to indicate word boundaries to text-processing systems in scripts that do not use explicit spacing, or after characters (such as the slash) that are not followed by a visible space but after which there may ...
The code ​ is the HTML code for the zero width space.
The zero width space is Unicode character U+200B. (HTML ​). It's remarkably hard to type. On Windows you can type Alt-8203.
I suspect this might be a bug in IE8. The only way I can induce the behaviour you want is to change the slash for a division slash (\u2215):
Miles​∕gallon
For some reason IE8 doesn't like the close proximity of the slash.
141
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>zwsp test</title>
<style type="text/css" media="screen">
.zwsp {
display: -moz-inline-box; /* Firefox before 3.0 */
height: 1px; /* Firefox before 3.0 screws up line height */
display: inline-block; /* Standards-based browsers (and IE!) */
overflow: hidden; /* In most cases will prevent weird spacing due to font sizes */
width: 1px; /* Must take up some space to appear in layout */
margin-left: -1px; /* Cancel the space it takes up */
}
</style>
</head>
<body>
<!-- Wide (without space) -->
<div style="width: 100px; border: solid black 1px; font-size: 15px">
Miles/gallon
</div>
<!-- Wide (with space) -->
<div style="width: 100px; border: solid black 1px; font-size: 15px">
Miles<span class="zwsp"> </span>/gallon
</div>
<!-- Narrow (with space) -->
<div style="width: 50px; border: solid black 1px; font-size: 15px">
Miles<span class="zwsp"> </span>/gallon
</div>
</body></html>
Edit: the downside of this approach is, of course, that the text itself is altered. This can affect stuff like what appears in search engine results. Of course you can serve it without the .zwsp elements to spiders. Up to you how much this matters, and whether there are other cases where the presence of an actual space character may affect output in other scenarios.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
