'In line' from CKEditor 5 alignment broken by CSS

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.

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.

hello,

i have tried the patch '3351145-in-line-from' and its working fine after remove 'display: block' from the code and create a separate style for video working fine please check attachment.

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.