Iframe uses deprecated align attribute

[Teresa Monahan]

When a user inserts an iframe, they can specify an alignment. The HTML generated for the iframe uses the align attribute which is deprecated. Instead the alignment should be applied using the float CSS property. The image dialog already uses the float CSS property to apply alignment. The iframe dialog should do the same.

Steps to Reproduce:

1.Insert an iframe into the editor.

2.Specify a url and select an option for alignment.

3.Look at the source of the editor.

e.g.

<iframe align="right" frameborder="0" scrolling="no" src="http://dev.ckeditor.com"></iframe></p>

Problem: The align attribute which is deprecated is applied to the iframe.

[Garry Yao]

Though align is a deprecated attribute, it's the only way of providing various layouts of an element using a single attribute, without any external stylesheet, which perfect fit for editor content, so that's why we show loves to it and keep it on all necessary situations, e.g. Flash dialog.

If you prefer alignment with css float, easily could it be achieved via dialog customization.

[Frederico Caldeira Knabben]

Using styles for alignment will simply align this feature with the image dialog. It makes a lot of sense, especially nowadays where people is strongly concerned about the quality of the code produced by the editor and based on the fact that the align attribute is deprecated.

If you see at effective drawback of using css:float in this case, please let us know.

[Garry Yao]

If you see at effective drawback of using css:float in this case, please let us know.

Well it's quite obvious that we miss center alignment and other vertical alignments in this way. For me some part of "nowadays css" really harms the editor.

[Frederico Caldeira Knabben]

Replying to garry.yao:

Well it's quite obvious that we miss center alignment and other vertical alignments in this way. For me some part of "nowadays css" really harms the editor.

Currently, we don't offer a "center" alignment option for iframes. Maybe I'm wrong.

Ok, I understand that we could miss some features there. But it's also true that we need to be consistent. We have also lost alignment features when we decided to change the image alignment in the past (#4246). Let's walk towards the future and follow the tendency. Our community asks for that.

Finally, when talking about iframes, alignment options like "top", "bottom" and "middle" are mostly senseless, considering the usual height of these elements.

[Frederico Caldeira Knabben]

Other idea...

Align "center" is still a very useful option, for iframes but also for tables. I was wondering... while we can use float for left and right alignment, what about using the align attribute just for "center" (configurable to disable it). Or even make it configurable to use right/left-margin:auto?

[Garry Yao]

Cited from #4246:

We should not have two separated options "Align" and "Float". For the eyes of end users, we're always talking about "Align". So, for now, we could reduce the number of alignment options to "Left" and "Right" only. When loading an image with the "align" attribute, we should remove it only if it matches "left" or "right", otherwise we just leave it intact. No vertical alignment should be considered at this moment.

I considered that a feature lost, vertical-align is still very critical for text surround images/objects.

Align "center" is still a very useful option, for iframes but also for tables. I was wondering...

I like the idea of handle alignment transparently (mapping it into different styles under the hood), probably this thing should be done in a separate plugin to be properly reused in all different dialogs.

what about using the align attribute just for "center"

This make fewer sense, if what drives here is about having validated content.

Or even make it configurable to use right/left-margin:auto?

Sounds good while it introduces some good level of complexity.

[Garry Yao]

How about handle it with the following mapping in an exclusive manner?

1. "left/right" -> float
2. "top/middle/bottom(inline)" -> vertical-align
3. "center(block)" -> right/left-margin:auto

[Frederico Caldeira Knabben]

Replying to garry.yao:

How about handle it with the following mapping in an exclusive manner?

1. "left/right" -> float

This looks ok.

2. "top/middle/bottom(inline)" -> vertical-align

Again, this is senseless for most of the cases in the editor usage. Only mini images (like icons) could have benefit of it. In any case, images are out of the scope of this ticket.

3. "center(block)" -> right/left-margin:auto

The problem is that, AFAIK, right/left-margin:auto will not work for all browsers. That's why I was talking about making it configurable: none, use "align" attribute or use "CSS margins".

[Jakub Ś]

Nowadays you can use ACF and decide whether you want to use attributes or styles. Please see: ​http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
​http://ckeditor.com/blog/CKEditor-4.1-RC-Released
​http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
​http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

[Jakub Ś]

I think we may close this ticket as a duplicate of a wider one #16907.