Problem/Motivation

Steps to reproduce

1. Add a table in ckeditor5 editor of node.
2. Choose center alignment in table properties.
3. View the node.

The table is shown left aligned due to lack of appropriate style properties.
ckeditor5 table not centered

Proposed resolution

To implement below suggestions from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table instead of using CSS float property in ckeditor5 library (Issue https://github.com/ckeditor/ckeditor5/issues/15535 raised in ckeditor5 issue queue)

Set margin-left and margin-right to achieve an effect that is similar to the align attribute:

left: margin-right: auto; margin-left: 0;
center: margin-right: auto; margin-left: auto;
right: margin-right: 0; margin-left: auto;

CommentFileSizeAuthor
#6 html_output_view.png58.63 KBsumit saini
#6 editor_view.png36.06 KBsumit saini
ckeditor5-table-not-centered.png15.07 KBsumit saini

Comments

sumit_saini created an issue. See original summary.

sandeepsingh199’s picture

sandeepsingh199 commented

This is the issue of ckeditor5 alignment tool. This bug CF in drupal11 too. for quick fix you can write inline style in edit mode(html) of table <table style="margin:0 auto;">.
I have checked with Claro & Gin, table took by default 100% width. Olivero theme is working fine but the issue with table alignment.
I am looking into it. I will add a patch if found anything.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Ckeditor5 table properties center alignment do not work » [upstream] CKEditor 5 table properties' "center alignment" does not work
Version: 10.2.x-dev » 11.x-dev
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs upstream bugfix

Thanks for linking the related issue! And especially thanks for creating an upstream issue! 👏

Can you also reproduce this at https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-edito...?

carp-enter’s picture

carp-enter commented

I have the same problem with Drupal 10.2.2 and PHP 8.2.15.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Priority: Normal » Minor
Issue tags: +Needs manual testing

Please see #3. We need that to be tested first.

For now, demoting to Minor, until I've got a response to #3.

sumit saini’s picture

sumit saini commented
StatusFileSize
new editor_view.png36.06 KB
new html_output_view.png58.63 KB

On this link https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-edito..., table properties plugin and source edit pluign is not available. So let me try to explain/reproduce this on https://ckeditor.com/docs/ckeditor5/41.1.0/examples/builds-custom/full-f....
There, I created 3 one cell tables with left(L), center(C) and right(R) alignment respectively as shown below
editor view

The html will render as below when viewed(generated html and its view can be checked here - https://jsfiddle.net/Lsepjmut ).
See that L and R tables are rendered as expected but the table C is left aligned instead of center aligned.
output

Because ckeditor5 only handled its look inside editor and did not account for the browser behaviour, this is a problem for
- pages rendered with drupal theme(easy fix is to attach extra css fix to handle it with theme)
- API responses for headless implementation (not possible to add a css fix for this case by drupal)
One solution to fix for both above cases, is to implement a text processor(filter) to add the necessary style properties but this sounds like a overhead already.

In the meantime, we can use the workaround suggested in #2 but this is not good UX for a non-technical contributor. So, it is better if this is fixed upstream by ckeditor5 (which unfortunately has been disagreed here https://github.com/ckeditor/ckeditor5/issues/15535#issuecomment-1864029206 ).

nitesh624’s picture

nitesh624
he/him
Primary language English
Location Ranchi, India
commented

I see upstream issue is closed. So is that something missing from Drupal side or we need to see any workaround plugin

smustgrave’s picture

smustgrave commented

Should this be closed?

francismak’s picture

francismak commented

We have a user reporting this as well.
So when editing in CKEditor, the site included a script from:
web/core/assets/vendor/ckeditor5/table/table.js

This JS will create inline style on the page with
.ck-content .table{display:table;margin:.9em auto}

So by default, table is centered in CKEditor. User expected to see the same thing in frontend page, but theme is missing CSS rule for this.

No issue for align left/right since CKEditor will add inline CSS float left/right.

IMO, I don't think this is a bug, but a classic example of unexpected result between admin editing vs frontend viewing.

sbrown1038’s picture

sbrown1038 commented

So by default, table is centered in CKEditor. User expected to see the same thing in frontend page, but theme is missing CSS rule for this.
...
IMO, I don't think this is a bug, but a classic example of unexpected result between admin editing vs frontend viewing.

My tables were centered until a couple of days ago when I updated Drupal Core. I checked with all of my installed themes and my outermost table is left aligned in View mode.

In Source mode in CKEditor, I noticed several instances of 100%px instead of 100%. With all due respect, I'm fairly certain this is the result of a bug.

Please refer to my reported issue https://www.drupal.org/node/3566162 which has been designated a duplicate of this issue for more info and uploaded files.

Thanks.

Steve

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

nitesh624’s picture

nitesh624
he/him
Primary language English
Location Ranchi, India
commented

if i put align="center" property in table tab through source code My table is coming center.
Ckeditor4 was adding this property to center align table

davidwhthomas’s picture

davidwhthomas commented

I have the same issue after upgrading Drupal core to 10.6.0

In the source view:

Adding margin:0 auto; gets changed to margin-top:0;margin-bottom:0 and the "auto" is removed.

Adding align="center" to a table is also removed.

This is when using a text format "Limit allowed HTML tags and correct faulty HTML" disabled.

I found this approach worked to preserve the styling:

<style>
.centered {
  margin-left: auto;
  margin-right: auto;
}
</style>

<table class="centered"> ...
nitesh624’s picture

nitesh624
he/him
Primary language English
Location Ranchi, India
commented

#13 seems to be working fine but do editor need to add class "centered" by going to source or it can be handled through a custom plugin?

nitesh624’s picture

nitesh624
he/him
Primary language English
Location Ranchi, India
commented

I think we need to handle it on frontend theme using css

nitesh624’s picture

nitesh624
he/him
Primary language English
Location Ranchi, India
commented

i see some new comment on https://github.com/ckeditor/ckeditor5/issues/15535#issuecomment-4076814652