Search code examples
csshtmlright-to-left

Avoid incorrect wrapping of some words in RTL languages (Farsi, Arabic)


In Farsi, Arabic and some other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). The problem this causes is that sometimes the whitespace will cause half a word to wrap over to the next line.

Example of incorrect wrapping

This is totally incorrect, but I don't want to disable the whole wrapping style of the paragraph. In Microsoft Word, this problem is dealt by pressing ctrl+shift+space. This enters a different white space between the letters that doesn't wrap. How would I achieve something similar in HTML and CSS?

Here's a jsFiddle example: https://jsfiddle.net/gb0p72b2/.


Solution

  • You are looking for a non-breaking space character. In MS Word, ctrl+shift+space inserts a non-breaking space character. To do that in HTML use this   instead of the normal white-space. Check out the JSFiddler: https://jsfiddle.net/6k0p9h5k/