Toggling side-by-side mode in a web page reflows the content. If the absolute
scroll position stays the same, the logical position in the document will change
and the user would have to scroll to find the content they were
previously reading.

To avoid this add logic which picks content in the viewport to use as a _scroll
anchor_, before the document is resized. After the document is resized, the
scroll position is changed so that the vertical position of the scroll anchor in
the viewport is the same as before. This keeps most of the content on screen.

The scroll anchor is currently chosen by picking the first _word_
(non-whitespace substring of a text node) which is visible in the viewport,
represented as a DOM Range. This fine-grained scroll anchor is chosen rather
than eg. just a DOM element, because long paragraphs may change in size
substantially relative to the viewport after resizing the document, so just
preserving the location of the paragraph element would not preserve the content
that is on screen.

 - Add `preserveScrollPosition` helper in html-side-by-side.js which
   picks a scroll anchor, invokes a callback and then restores the
   position of the scroll anchor.

 - Make the HTML integration use `preserveScrollPosition` to preserve
   the scroll position after activating and de-activating side-by-side
   mode

 - Add helper functions in src/annotator/util/geometry for comparing
   DOMRect objects