Selecting sections of (e.g.) Arabic words breaks text rendering

_Original bug here: hypothesis/h#2827._

> I'm working on a project that uses Hypothesis. The texts are in Arabic, which consists of letters that have stand-alone "isolated" forms and connected forms. (https://en.wikipedia.org/wiki/Arabic_alphabet#Table_of_basic_letters)
>
> When I select a portion of a word for highlighting or annotation, rather than selecting the whole word, it splits the connected letters apart, into their isolated forms. This makes it very difficult to read, and sloppy.
>
> The English equivalent would be that selecting a portion of a word would insert an unrelated symbol into the text (i.e. t@ext).

### Steps to reproduce
1. Make a highlight that starts or ends (or both) in between [Arabic characters which have differing initial, medial, and terminal forms](http://unicode.org/charts/PDF/UFE70.pdf). Here's a page with plenty of arabic text on which to experiment: http://www.dalilusa.com/arabic_course/text01.asp

### Expected behaviour
The highlight should be drawn without changing the rendering of the text.

### Actual behaviour
A highlight inserts an HTML tag into the DOM text node, which results in the characters either side of the highlight boundaries potentially changing their form from medial to initial or medial to terminal.

By way of example: if you highlight the jīm (ج) in the middle of

```
الزجاج
```

then you'll get

```

الزجاج

which turns the jīm into an isolated glyph.

### Additional details

- See also openannotation/annotator#473