Confirmed Image alignment text wrapping not working in preview or when posted/saved

[Mouth]

Affected version

2.2.3 P1

When editing a post, in an Article Thread if that matters, and having added text and inserted upload image(s), when clicking an image and changing it's alignment to right so that text wraps to the left of it, it displays correctly in the editor. But in both Preview or posted/saved displays, the image alignment and text wrapping doesn't work.



Default Style, with no customisations, used to ensure it wasn't an issue with child styling.

 

[Mike]

This isn't something I was able to reproduce. I found the thread that represents the screenshot on your site but the image hasn't been embedded in the post there, so I can't see it in place.

Can you reproduce this in a thread in the test forum here?

 

[Mouth]

Can you reproduce this in a thread in the test forum here?

Yes, same outcome. Displays right aligned with text wrapping whilst editing, but not when saved/published.

https://xenforo.com/community/threads/toby-price-oam.191854/

 

[Mike]

This appears to be specific to a percentage-based resize, which I'm not really sure we're expecting. Using a specific pixel approach doesn't have the issue.

 

[Mike]

As mentioned, this is a side effect of using percentages to scale images. While we do allow this, I don't think it's working how people expect or are intending to use it.

So questions for people (and @Mouth in particular):

1. Have you tried to resize images using a percentage width (or height)? Note that you'd have to explicitly type this in as dragging to resize in the RTE will set an absolute value.

2. If you did set something like a 50% width, what did you intend/expect that to mean? 50% of the original image size? 50% of the width of the editor/message display area?

The key here is that the way HTML and CSS work, if you set a 50% width, you're not requesting 50% of the image's natural size. You're saying 50% of the width of the parent element, regardless of image size. Try it with a small image and you'll see it scale the image up (at least in the RTE). It seems to me like this is unlikely to be the intent in most cases, at least in the context of a post.

The big problem is that, independent of aligning/floating an image, percentage scaling doesn't work as expected when viewing a post (though it might appear to do so in the RTE). If you have a particularly large image, it might appear to do what you expect, but with any image that doesn't naturally take up the full width where the message is displayed, it behaves unexpectedly. This is because there's a wrapper element and, for the browser to avoid a catch-22, this element gets sized based on the image's natural width. The image within is then scaled down to 50% of that. So actually, in this case, we do sort of scale the image to 50% of its natural size, though the containing element is still the full image size, which triggers some unexpected behaviors (most notably, strange float behavior).

So this may need to be something we explicitly drop support for given the significant variation in behaviors. It certainly shouldn't be common because it requires explicitly typing in a percentage scaling, but if you've used it intentionally, please let us know. The potential change to existing posts is a concern.

 

[Mouth]

1. Have you tried to resize images using a percentage width (or height)?

Yes. From the presentation within the editor after inserted, and the sizing defaulting to 'auto', I expected it to allow/follow standard html/css usage, and thus % accepted. Because the image dimensions (original, or as resized and presented in the editor) are not displayed, I wouldn't know what pixel sizes would be appropriate to enter to achieve half of the current size.

If you did set something like a 50% width, what did you intend/expect that to mean? 50% of the original image size? 50% of the width of the editor/message display area?

Neither. The image is presented resized when inserted into the editor, and I decided that its still too big and want it to be half that size. Thus I expected public presentation to behave the same as when resized within the editor, eg. be half of the initial size displayed in the editor when inserted.

So this may need to be something we explicitly drop support for given the significant variation in behaviors.

I do not think that would be a large concern, dragging to resize being more efficient and probably more logical/commonly used with 'pinch to zoom' gesture being commonplace. I'm happy with drag to resize visually achieving what I wanted.

The potential change to existing posts is a concern.

Perhaps go with the original size pixel value x percentage value, eg. 1200 x 50% and thus setting it to 600px.