'In line' from CKEditor 5 alignment broken by CSS in Olivero

Patch is in play

Can confirm the issue described and that the MR fixes it. Same as the screenshots provided.

The reason this was added is that the default display: inline UA styles for <img> elements will leave space below the image in many circumstances (which can throw off vertical spacing).

Because CKEditor labels the mode as inline, I think we should support that (even though I can't really think of a use case). But we shouldn't change the styles within the entire site.

Instead of modifying base.pcss.css, let's create an override within text-content.pcss.css that sets it to display: revert. Using revert instead of inline will make it more explicit that we're trying to change back to the UA's default behavior.

Addressed #5, Instead modifying base.pcss.css file, I have overrided text-content.pcss.css file. please review

Believe it was discussed on slack that maybe a class gets added for inline. To cover backwards compatibility.

I am working on this.

I have attached a patch, please verify it.

Still seems to be trying to address it purely with css. Think a class should be attempted.

Hey @smustgrave,
Img is inline level element and in Olivero theme img tag css comes with 'display:block' css property from base.css file so I think we can remove display:block property.
For ref adding screenshot with display block and display inline property.
Can I remove property from base.css file and submit the patch ?

Removed display:block css from base file and it is better solution as img is inline level element.
For ref attached before and after screenshot.
Please review.

Hey @smustgrave,
If my patch is good then please change the status from needs work to needs review.

@pradipmodh13, whenever you put a new patch up it's good if you put an interdiff here's the documentation on how to do that:
https://www.drupal.org/node/1488712 →

And also feel free to set the status to Needs Review if you want people to look at the changes, that's it's intention. See the description of the statuses:
https://www.drupal.org/docs/develop/issues/fields-and-other-parts-of-an-... →

Removing this CSS will most likely caused a visual regression on existing sites.

If the current fix solves the issues going forward thats great but think we need to consider existing sites too.

Which is why I suggested some sort of new class being added that the css can work with. That way the problem is solved and existing sites should be left alone.

Just chiming in with some advice:
setting display: block on images only to fix the bottom "whitespace" issue is not the best way, images should be inline by default.

A simple non-intrusive fix for the whitespace at the bottom of images is to just set "vertical-align: top" or any other statement except 'baseline' (I usually go for top).

Hope this helps.

I strongly agree with the approach in #16 above. The other alignments mostly utilize adding a CSS class, too. Though I notice a data-align="right" in the CKEditor "source" becomes class="align-right" when a page is saved. So, I'm not sure what that attribute would be that would then become a CSS display: inline. I also agree with comment #17 that the default should be one where the adjacent content doesn't fall to the bottom.