| | 14 | |
| | 15 | == More details == |
| | 16 | |
| | 17 | It looks in Word pretty much like this: |
| | 18 | |
| | 19 | [[Image(https://i.imgur.com/OdLhLi5.png)]] |
| | 20 | |
| | 21 | The problem is that Word generates following markup: |
| | 22 | |
| | 23 | {{{ |
| | 24 | <div align=right> |
| | 25 | |
| | 26 | <table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0 style='(...)'> |
| | 27 | <tr style='(...)'> |
| | 28 | (...) |
| | 29 | </tr> |
| | 30 | </table> |
| | 31 | |
| | 32 | </div> |
| | 33 | }}} |
| | 34 | |
| | 35 | Which displays it correctly, but uses deprecated `align` attribute. |
| | 36 | |
| | 37 | We have a [https://github.com/ckeditor/ckeditor-dev/blob/7a3a51194875502fd00d9e4d23d5e87557d80d34/core/filter.js#L2098-L2107 style transformation] in core which transforms any `align` into `float` CSS prop, which is fine for elements like `table`, `img`, `iframe`, but it's wrong for `div` and `p`. Becasue for `div` and `p` it defines the alignment of content elements within this element. |
| | 38 | |
| | 39 | It's also worth to remember that `align` is a little more aggresive than `text-align` CSS prop, as it affects anything, whereas for `text-align` you need to apply `margin: x auto` for block-alike elements, otherwise they won't be aligned. |
