Enhancement Request: Explicitly Set "text-align: left" for Table Cells in CKEditor 5

[Tsegaye]

Hello CKEditor Team,

I've encountered a scenario with CKEditor 5's table cell alignment that I believe could be improved for better usability and compatibility with various website styles.

Issue Summary: CKEditor 5's table feature allows users to set the horizontal alignment (left, center, right, justify) for table cells. However, I've noticed that while alignments for center, right, and justify are explicitly added to the element's style (e.g., style="text-align:center"), the left alignment does not add style="text-align:left" to the element. This behavior seems to be by design, under the assumption that left alignment is the default for most browsers and environments.

Implication: Many websites and applications use global CSS styles that set a different default text alignment (e.g., text-align: center for the entire site). In such cases, table cells without an explicitly set text-align:left style inherit the global alignment, leading to content being centered even when the user has selected left alignment in CKEditor. This results in a discrepancy between the expected outcome (left-aligned text within a table cell) and the actual display on the website.

Suggested Enhancement: To ensure that the user's alignment choice is always respected and to improve compatibility with diverse website styles, I suggest modifying CKEditor 5's behavior to explicitly add style="text-align:left" to table cells when left alignment is selected. This change would make the behavior consistent across all alignment options and prevent unintended styling due to global CSS rules.

Use Case Justification: This enhancement would benefit users and developers working on websites with global styles that override the default left alignment. It ensures that the visual representation in CKEditor's editor matches the output displayed on the website, enhancing the WYSIWYG experience.

Possible Implementation: A potential approach could involve adjusting the TableCellHorizontalAlignmentCommand to include style="text-align:left" explicitly when processing left alignment requests. This would align the handling of left alignment with the other alignment options, providing a consistent and predictable behavior.

Thank you for considering this enhancement. I believe it would make CKEditor 5 even more versatile and user-friendly, especially for users customizing table content in environments with diverse styling requirements.

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Witoso]

Hi! Thanks for the request, @oleq do you remember context for this?

[oleq]

@Tsegaye I assume that you meant "center" when you wrote "left"? Because the center alignment behaves the way you mentioned: there are no inline styles applied and we solely rely on UA/CKEditor content styles stack.

If that's so, this has a lot in common with https://github.com/ckeditor/ckeditor5/issues/14921#issuecomment-1865999561. It could even be a duplicate.

[Tsegaye]

@oleq thanks for looking into this. Not for Table Alignment. For Table Cell Horizontal Alignment. Center, Right, Justify all add inline styles but not for Left.

As you can see below, for the left alignment, the text-align:left is not set explicitly. On our website, we have a global td center property. So, when we want to align text to left using the ckeditor cell horizontal alignment button, it does not add style="align:left" property.

[Tsegaye]

@oleq in the meantime, I created this custom plugin to apply left alignment in the td for our drupal site which is running on CKEditor 5. Let me know if this approach is good.

import { Plugin } from 'ckeditor5/src/core';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableCellHorizontalAlignmentCommand from '@ckeditor/ckeditor5-table/src/tablecellproperties/commands/tablecellhorizontalalignmentcommand';

class CustomTableCellHorizontalAlignmentCommand extends TableCellHorizontalAlignmentCommand {
    execute(options = {}) {
        // Call the original execute method to handle alignment
        super.execute(options);

    }
}

export default class SetTextAlignLeftForTableCells {
    constructor( editor ) {
        this.editor = editor;
    }

    init() {
        const editor = this.editor;

        // Override the default table cell horizontal alignment command
        editor.commands.add('tableCellHorizontalAlignment', new CustomTableCellHorizontalAlignmentCommand(editor));

        // Add a downcast converter for table cell alignment that ensures explicit 'text-align: left'
        this._setupConversion();
    }

    _setupConversion() {
        const editor = this.editor;

        // Downcast conversion for table cell alignment
        editor.conversion.for('downcast').add(dispatcher =>
            dispatcher.on('attribute:tableCellHorizontalAlignment:tableCell', (evt, data, conversionApi) => {
                const { item, attributeNewValue } = data;
                const viewWriter = conversionApi.writer;
                const viewTableCell = conversionApi.mapper.toViewElement(item);

                // Explicitly set text-align style for left alignment
                if (attributeNewValue === 'left') {
                    viewWriter.setStyle('text-align', 'left', viewTableCell);
                } else if (attributeNewValue) {
                    // For other alignments, apply the specified value
                    viewWriter.setStyle('text-align', attributeNewValue, viewTableCell);
                } else {
                    // If no alignment is specified, remove the text-align style
                    viewWriter.removeStyle('text-align', viewTableCell);
                }
            })
        );
    }
}

[timwehrmann]

@Tsegaye I strongly support this issue. Thanks for your custom plugin, I used that in our TYPO3 instance as well. But there is one user experience issue with the custom plugin (maybe with the approach itself, I dont know much of ckeditor's architecture):

• I have to click another alignment first to re-select left for getting text-align: left value applied to the column

This is no error or something, the editors of the TYPO3 instance can deal with that. :)

[Tsegaye]

@timwehrmann yes, the deficiency of my plugin is that the user has to click another button (right, justify, or center) to make the left alignment to work. My site also has "center" alignment for table cells globally.

[Tsegaye]

@oleq your explanation was on the Table alignment. My issue was on table cell alignment, it is not for Table Alignment. For Table Cell Horizontal Alignment. Center, Right, Justify all add inline styles but not for Left.