Skip to content

Wrapping text with CSS

General consideration

The most important principle is that content and presentation should be independent independent. Linguists (translators, verifiers, etc.) should focus on the text and not be asked to deal with layout and typesetting, which is the job of the publishers (DTP, CSS engineers, etc.). Following that principle helps avoid situations where text is over-fitted to a specific context/medium while at the same time compromising its chances of it being reused in other contexts/media.

Of course, that excludes semantic formatting that applies to specific inline elements (e.g. bold, italics, etc.).

In a nutshell, asking linguists to insert line breaks, hyphens, extra spacing, etc. to fake a certain visual effect (wrapping, indentation, etc.) in the layout is a bad idea. Instead, in a web publication, styles (CSS) should be used for that, and often that requires language-specific CSS rules. Let me know if you or your CSS crew need more details about this.

In action

Let's see what the same text looks like both forcing wrapping manually (by explicitly inserting line breaks in the text and letting the browser take care of wrapping automatically (with CSS styles), in different widths.

Context 1 -- Width: 25em

The text below looks the same when line breaks are inserted manually or when the text is wrapped automatcially through styling rules.

With line breaks:

Since the 1970s, scientists have been
worried about the amount of Dioxin, a
toxin in fish caught in Baltic Sea.


1970ๅนดไปฃไปฅๆฅใ€็ง‘ๅญฆ่€…ใŸใกใฏใƒใƒซใƒˆๆตทใงๆ•็ฒใ•ใ‚ŒใŸ้ญš
ใซๅซใพใ‚Œใ‚‹ๆฏ’็ด ใงใ‚ใ‚‹ใƒ€ใ‚คใ‚ชใ‚ญใ‚ทใƒณใฎ้‡ใ‚’ๆ‡ธๅฟตใ—ใฆใ
ใŸใ€‚

With styles:

Since the 1970s, scientists have been worried about the amount of Dioxin, a toxin in fish caught in Baltic Sea.


1970ๅนดไปฃไปฅๆฅใ€็ง‘ๅญฆ่€…ใŸใกใฏใƒใƒซใƒˆๆตทใงๆ•็ฒใ•ใ‚ŒใŸ้ญšใซๅซใพใ‚Œใ‚‹ๆฏ’็ด ใงใ‚ใ‚‹ใƒ€ใ‚คใ‚ชใ‚ญใ‚ทใƒณใฎ้‡ใ‚’ๆ‡ธๅฟตใ—ใฆใใŸใ€‚

Context 2 -- Width: 18em

The same text as above is rendered correctly when the text is wrapped automatcially through styling rules but it scales badly where line breaks were inserted manually.

With line breaks (in the same position as above):

Since the 1970s, scientists have been
worried about the amount of Dioxin, a
toxin in fish caught in Baltic Sea.


1970ๅนดไปฃไปฅๆฅใ€็ง‘ๅญฆ่€…ใŸใกใฏใƒใƒซใƒˆๆตทใงๆ•็ฒใ•ใ‚ŒใŸ้ญš
ใซๅซใพใ‚Œใ‚‹ๆฏ’็ด ใงใ‚ใ‚‹ใƒ€ใ‚คใ‚ชใ‚ญใ‚ทใƒณใฎ้‡ใ‚’ๆ‡ธๅฟตใ—ใฆใ
ใŸใ€‚

With styles:

Since the 1970s, scientists have been worried about the amount of Dioxin, a toxin in fish caught in Baltic Sea.


1970ๅนดไปฃไปฅๆฅใ€็ง‘ๅญฆ่€…ใŸใกใฏใƒใƒซใƒˆๆตทใงๆ•็ฒใ•ใ‚ŒใŸ้ญšใซๅซใพใ‚Œใ‚‹ๆฏ’็ด ใงใ‚ใ‚‹ใƒ€ใ‚คใ‚ชใ‚ญใ‚ทใƒณใฎ้‡ใ‚’ๆ‡ธๅฟตใ—ใฆใใŸใ€‚

References

Code