Left-aligned and right-aligned images inside of textboxes don't respect borders

[mcgratay]

Prerequisites

• [x] Can you reproduce the behavior you wish to address with all plugins except Pressbooks deactivated?
• [x] Are you running the latest version of Pressbooks, the latest version of McLuhan, and the latest version of WordPress?
• [x] Are you experiencing the issue while using this book theme?
• [x] Did you perform a cursory search to see if your bug or enhancement is already listed?

Description

If an image in a textbox is aligned left or right so that text wraps around it, that image will not respect the bottom border of the textbox. The image and any attached caption will flow over the textbox in all export formats. Note that this bug does not seem to affect the webbook format, but does appear in in the visual editor.

Notes:

• Affects all Buckram themes. Tested on Graham, Malala, and adunis
• Affects PDF, digital PDF, EPUB, and MOBI formats along with the visual editor display
• Does not affect centered images or images with no alignment

Visual editor view of a small textbooks with a right-aligned image:

This issue is particularly hard to work around in ebook format because the image may flow over

or even onto the next page

depending on the size of the screen and the reader's settings. Image styles in all formats should be changed so that the textbox bottom border padding accounts for side-aligned images and their captions.

Example: https://imageinatextbox.textopress.com/

Steps to Reproduce

1. Create a new chapter and add a textbox
2. Inside the textbox, add a small amount of filler text and an image that may extend be larger than the paragraph
3. Edit the image alignment so that it aligns to the right or left
4. Save the chapter and export to all formats

Expected behavior: All content inside of a textbox is contained within the borders of the textbox in all formats.

Actual behavior: Right or left-aligned images may flow over the border of a textbox.

[SteelWagstaff]

For ideas on fixing, see https://stackoverflow.com/a/35280358

[SteelWagstaff]

Adding #tinymce.wp-editor .textbox, .textbox { overflow:auto; } to custom styles appears to fix issue for webbook (and visual editor), but adding something similar to ebook & pdf stylesheet does not produce satisfactory resolution for ebook or PDF exports.