search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.34k stars 3.68k forks source link

[Table Caption] Default caption position: below or above table? #9254

Closed oleq closed 3 years ago

oleq commented 3 years ago

Provide a description of the task

Extracted from https://github.com/ckeditor/ckeditor5/issues/9223#issuecomment-800373167:

When you google "table caption" and check the images you'll find out that the caption usually precedes the table (AFAIR this is LaTeX standard). 

> Figure captions are generally placed below the figures, while table captions must be placed above the tables. This is because we generally read tables from the top down, and therefore want to see the caption at the top. Figures are not always read top down.

via https://pressbooks.bccampus.ca/technicalwriting/chapter/figurestables/

Also, check the comprehensive Wikipedia guide to tables to see this is a preferred order.

oleq commented 3 years ago

cc @magda-chrzescian

Reinmar commented 3 years ago

We need a decision where to place this caption by default.

We should use CSS to control the place. In the model/data this should be const.

magda-chrzescian commented 3 years ago

The inconsistency between the table and image captions seems to be less of a problem than the content readability, so I'd rather see captions above tables.

Dropping it here as it may be useful while the implementation: https://css-tricks.com/almanac/properties/c/caption-side/

maxbarnas commented 3 years ago

Should I fix this with CSS? (look at the table helper)

image

oleq commented 3 years ago

Should I fix this with CSS? (look at the table helper)

You didn't share DOM so I'm just guessing but it looks like the selection handle is located somewhere deeper in the structure instead of the top-most widget wrapper (figure?) and that's why it is positioned relative to the wrong element.

maxbarnas commented 3 years ago

Sorry for missing it. The DOM looks like this:

image

Helper is placed above table using transform: translateY (100%). I wonder if I rather should try to use CSS to bend the helper placement to my will or try to change the placement of the helper in the DOM. But that would affect a lot of other components in the editor, am I right?

Update: @niegowski pointed out that just top: 0 in the helper class should do the trick, and in fact it did.