Text wrapping on arbitrary non-whitespace characters

Is it possible to use CSS to direct a browser to wrap text on
something in addition white-space characters?

For example, I have a table that changes width dynamically with
the browser window. The cells in the tables include only large
numbers. The numbers are formatted with commas to delimit the
thousands (e.g. 2,481,000). If the window is too narrow to hold the
full-width of the table, then I would like the text of each number
to be word-wrapped at the commas, so that the right end of the table
doesn't extend beyond its div container.

Can this be done?

-A

On Mon, 10 Aug 2009, axlq wrote:

The numbers are formatted with commas to delimit the
thousands (e.g. 2,481,000). If the window is too narrow to hold the
full-width of the table, then I would like the text of each number
to be word-wrapped at the commas,

Comma and period are decimal signs:

1.5 = 1,5 = 3/2

Write numbers with spaces, which is the only correct and unambiguous way:
http://physics.nist.gov/cuu/Units/checklist.html #16 Digit spacing
http://physics.nist.gov/Document/checklist.pdf #16 Digit spacing

--
In memoriam Alan J. Flavell
http://www.alanflavell.org.uk/charset/

On 08/10/09 09:47 am, axlq wrote:

Is it possible to use CSS to direct a browser to wrap text on
something in addition white-space characters?

No.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

axlq wrote:

Is it possible to use CSS to direct a browser to wrap text on
something in addition white-space characters?

You can use
word-wrap: break-word
which is a Microsoft invention, now also supported by some other browsers
and included in a CSS 3 draft. But it means brute breaking: break at any
character, when the available width has been filled.

There's also a different approach that requires extra markup but gives much
better control: use generated content to add a zero-width space, ZWSP.
Assuming you would want to break after a comma, for example, you would write
the comma as
<span class="wbr">,</span>
and use CSS code
..wbr:after { content: "\00200B"; }

This looks contrived as compared with using ZWSP in content, e.g. using a
character reference, as in
,&#x200b;
However, the CSS approach has the advantage of not causing confusion on
browsers that don't understand ZWSP - we can hope that any browser that
understands generated content can handle ZWSP, too.

(See also http://www.cs.tut.fi/~jkorpela/html/nobr.html for additional
notes, minor and major, partly dated.)

The numbers are formatted with commas to delimit the
thousands (e.g. 2,481,000). If the window is too narrow to hold the
full-width of the table, then I would like the text of each number
to be word-wrapped at the commas, so that the right end of the table
doesn't extend beyond its div container.

I would suggest a redesign of the page rather than such tricks. Breaking
numbers that way tends to be counter-productive.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Thanks for the detailed reply. I didn't know about that trick with
the zero-width space. It looks kind of kludgey, so I don't think
I'll use it, but at least I just learned something!

-A

In article <_7Zfm.33993$vi5.30511 (AT) uutiset (DOT) elisa.fi>,
Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

axlq wrote:

Is it possible to use CSS to direct a browser to wrap text on
something in addition white-space characters?

You can use
word-wrap: break-word
which is a Microsoft invention, now also supported by some other browsers
and included in a CSS 3 draft. But it means brute breaking: break at any
character, when the available width has been filled.

There's also a different approach that requires extra markup but gives much
better control: use generated content to add a zero-width space, ZWSP.
Assuming you would want to break after a comma, for example, you would write
the comma as
span class="wbr">,</span
and use CSS code
.wbr:after { content: "\00200B"; }

This looks contrived as compared with using ZWSP in content, e.g. using a
character reference, as in
,&#x200b;
However, the CSS approach has the advantage of not causing confusion on
browsers that don't understand ZWSP - we can hope that any browser that
understands generated content can handle ZWSP, too.

(See also http://www.cs.tut.fi/~jkorpela/html/nobr.html for additional
notes, minor and major, partly dated.)

The numbers are formatted with commas to delimit the
thousands (e.g. 2,481,000). If the window is too narrow to hold the
full-width of the table, then I would like the text of each number
to be word-wrapped at the commas, so that the right end of the table
doesn't extend beyond its div container.

I would suggest a redesign of the page rather than such tricks. Breaking
numbers that way tends to be counter-productive.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

axlq wrote:

Thanks for the detailed reply. I didn't know about that trick with
the zero-width space. It looks kind of kludgey, so I don't think
I'll use it, but at least I just learned something!

Well, the zero-width space "trick" is the least tricky of the methods you
could use! The main problem with it is that some old browsers display it
using a symbol of unrepresentable character, which is bad enough and
strictly speaking not a bug, as HTML specs don't require a support to it.
But it's a standard character, even in the strictest sense of "standard"
(namely defined in an ISO standard). And the Unicode standard explicitly
recommends it:
"Note: Use ZWSP as a manual override to provide break opportunities around
alphabetic or symbol characters."
http://www.unicode.org/unicode/reports/tr14/#DescriptionOfProperties

The _kludgey_ way is to use the HTML tag <wbr> instead. It's what works most
widely, has no known drawbacks in the rare cases where it does not work, and
is not part of any specification and is widely frowned upon by highbrow
formalists. This method, though basically pure HTML (well, not pure to the
Purists...), has a minor CSS connection: As I write on my page, the Opera
browser has some difficulties with <wbr> in some situations, but:

Sufficiently new versions of Opera will handle wbr in the intended way, if
you use the following style sheet, which effectively tells the browser to
insert U+200B, i.e. ZWSP after each wbr element:

wbr:after { content: "\00200B"; }

--
Yucca, http://www.cs.tut.fi/~jkorpela/