"Bug" is not a bug of non-centering of figures with the attribute align = center
As you know, Habr uses “old school” attributes of tags that allow text formatting and pictures in articles and comments by the authors. Among these tags was one missing from the W3C standards. This is <img align = "center">. It was found that some of the authors "naively" use this attribute, because Habra simply does not provide another. Strangely enough, in part of browsers this attribute on Habré is supported, although experiments with pure test pages show that there are no miracles, it does not work in img.
I was interested in the question of when the attribute is supported and what needs to be added in the styles so that it starts to be supported everywhere. If it worked on the site, we would support the naive view that this is the correct attribute, but, nevertheless, we would get a tool for centering the drawings.
In fact, the align = “center” attribute in HTML is intended for block elements (div, p, ...) and refers not to them, but to the internal content of the element. Therefore, if we write
But this can not be written on Habré, these are the rules of the tag parser.
')
To check how it works on Habré, you can use the preview when writing a comment or in a draft article. This will not exactly coincide with the final look, but you can use it for tests.
Here is what we see:
In most browsers, except for Firefox, the second image is centered (if the Habr styles have not yet been fixed), although tests show that this attribute is not supported by browsers (except for rare exceptions with doctypes).
Why this wrong text does not work everywhere, but works on Habré, and not in Firefox?
UPD Jan 25 2013 (in a year): it was found that Habr's styles ceased to support this incorrect attribute. To use it on the site, users had to finish writing the same way as it was done for Firefox before.
Looking at the style of the picture, we find the cause.
Yes, on Habré in the file all.css this trick of turning the wrong attribute into the "correct" one is supported. It is these properties that you need to have a picture to start centering - to be a block and center with a margin style : 0 auto; .
(But those who know that there is no such attribute cannot themselves guess that it works on Habré - there is no documentation, the test in Fx does not pass. I, for example, learned about its existence by chance when I saw aleksandrIt in my notes (almost in each annotation), looking through Chrome.)
It remains to understand why centering does not work in Firefox.
Things are easy - also watch styles (using Firebug). Here we find that the attribute miraculously changed to align = "middle" and even manual renaming does not help fix it. The browser itself changes the wrong attribute to, “in his opinion,” the most suitable (vertical alignment in the stream of lower-case elements). Therefore, the style rule img [align = "center"] stops working.
Therefore, for full support of browsers on Habré there is not enough rule:
To view the test page for testing the img align = "center" attribute in different browsers, visit spmbt.kodingen.com/habrahabr/testImgAlignCenter.htm . In Firefox, it will look something like this, in other browsers a bit different. Pictures and blocks are tinted so that they differ better. There are no real pictures to see the ALT captions.
At first, under the “Basic test” we will see a bluish “ Empty Fig. ” Block with the required attribute and an attribute failure in the image, which is completely logical.
One click on the “Enable Correcting Styles” link allows you to see how the style rules we've obtained are applied so that centering starts working in all browsers.
Technical notes. The resume view of the addRules () styles application function is caused by the desire to include the script in the IE8 browser in the execution. (It wasn’t checked in IE9, but it should work as in the others.) Without the doctype, the margin: 0 auto rule will not work in IE8, but the align: right and left attributes will work.
Such a rule was specifically written to correct the error in the Habr ZenComment styles and, independently of them, in the HabrAjax script (Habr-adjax), after which the centering with the align = "center" attribute started working correctly in all browsers.
For conclusions in general , I must say that one should not support the opinion among webmasters that this attribute can work in IMG tags. Let the time of attributes pass and all use styles, some inexperienced web builders may have the impression that such an attribute exists.
UPD Jan 25 2013 (in a year): it was found that Habr's styles ceased to support this incorrect attribute. To use it on the site, users had to finish writing the same way as it was done for Firefox before.
I was interested in the question of when the attribute is supported and what needs to be added in the styles so that it starts to be supported everywhere. If it worked on the site, we would support the naive view that this is the correct attribute, but, nevertheless, we would get a tool for centering the drawings.
In fact, the align = “center” attribute in HTML is intended for block elements (div, p, ...) and refers not to them, but to the internal content of the element. Therefore, if we write
<p align="center"><img src="123.gif"/></p> But this can not be written on Habré, these are the rules of the tag parser.
')
To check how it works on Habré, you can use the preview when writing a comment or in a draft article. This will not exactly coincide with the final look, but you can use it for tests.
<div align="center"><img src="1450823006127547032299"/></div> <img align="center" src="1450823006127547032299"/> Here is what we see:
In most browsers, except for Firefox, the second image is centered (if the Habr styles have not yet been fixed), although tests show that this attribute is not supported by browsers (except for rare exceptions with doctypes).
Why this wrong text does not work everywhere, but works on Habré, and not in Firefox?
UPD Jan 25 2013 (in a year): it was found that Habr's styles ceased to support this incorrect attribute. To use it on the site, users had to finish writing the same way as it was done for Firefox before.
Looking at the style of the picture, we find the cause.
img[align="center"] { display: block; margin: 0 auto !important; } Yes, on Habré in the file all.css this trick of turning the wrong attribute into the "correct" one is supported. It is these properties that you need to have a picture to start centering - to be a block and center with a margin style : 0 auto; .
(But those who know that there is no such attribute cannot themselves guess that it works on Habré - there is no documentation, the test in Fx does not pass. I, for example, learned about its existence by chance when I saw aleksandrIt in my notes (almost in each annotation), looking through Chrome.)
It remains to understand why centering does not work in Firefox.
Things are easy - also watch styles (using Firebug). Here we find that the attribute miraculously changed to align = "middle" and even manual renaming does not help fix it. The browser itself changes the wrong attribute to, “in his opinion,” the most suitable (vertical alignment in the stream of lower-case elements). Therefore, the style rule img [align = "center"] stops working.
Therefore, for full support of browsers on Habré there is not enough rule:
img[align="center"], img[align="middle"]{ display: block; margin: 0 auto !important; } Test clean page with attributes
To view the test page for testing the img align = "center" attribute in different browsers, visit spmbt.kodingen.com/habrahabr/testImgAlignCenter.htm . In Firefox, it will look something like this, in other browsers a bit different. Pictures and blocks are tinted so that they differ better. There are no real pictures to see the ALT captions.
At first, under the “Basic test” we will see a bluish “ Empty Fig. ” Block with the required attribute and an attribute failure in the image, which is completely logical.
One click on the “Enable Correcting Styles” link allows you to see how the style rules we've obtained are applied so that centering starts working in all browsers.
Technical notes. The resume view of the addRules () styles application function is caused by the desire to include the script in the IE8 browser in the execution. (It wasn’t checked in IE9, but it should work as in the others.) Without the doctype, the margin: 0 auto rule will not work in IE8, but the align: right and left attributes will work.
What to do?
Such a rule was specifically written to correct the error in the Habr ZenComment styles and, independently of them, in the HabrAjax script (Habr-adjax), after which the centering with the align = "center" attribute started working correctly in all browsers.
For conclusions in general , I must say that one should not support the opinion among webmasters that this attribute can work in IMG tags. Let the time of attributes pass and all use styles, some inexperienced web builders may have the impression that such an attribute exists.
UPD Jan 25 2013 (in a year): it was found that Habr's styles ceased to support this incorrect attribute. To use it on the site, users had to finish writing the same way as it was done for Firefox before.
Source: https://habr.com/ru/post/135818/
All Articles