Add additional help text to transcription editor

[blms]

testing notes (qa)

Edit the transcription for a document (via document details page --> "edit x's edition" or "add new")

• Read the help text in the transcription editor, and confirm it is left-aligned, makes sense, and is accurate
• Confirm the new text is present

dev notes

• add instructions that you have to click outside the bounding box to pan
  • adjust tahqiq logic so this works with unsaved annotations!
• add instructions about dragging to reorder or move to a different image
• align help text left

[kseniaryzhova]

@rlskoeser @blms Given our update on using the thumbnail to move around the document image when Zoomed in, could we update the help text to say the following (changes in bold):
"Hold shift and then click and drag over the image to select a rectangular region for the block of text you want to transcribe (this is an annotation zone).
When an annotation zone is active on the image, use the red square in the thumbnail to move around the image when zoomed in.
Drag blocks of text to reorder or move to a different image."

Otherwise, the text is left-aligned!

[kseniaryzhova]

@rlskoeser @blms works for me! Only thing is a minor aesthetic annoyance - on my screen the second sentence is too long and the "in" at the end is on its own line - looks awkward. If it's an easy fix, can we break up the sentence so that 2+ words are on the next line?

[blms]

@kseniaryzhova This depends on the size of your window—if you resize the window, the text wraps differently. Do we need this to be consistent regardless of window size? (Keep in mind this is also only seen by transcription editors, it's not public)

If it's ok like this, and that's the only remaining issue, then we can go ahead and close I think!

[rlskoeser]

I don't think we need to override the line wrapping, and css doesn't allow for widow/orphan controls with text wrapping, so let's leave this.