User:Zeal/Sandbox/Inline image alignment
Inline images on MediaWiki are by default vertical-alignment: middle. Specifically within paragraphs (p img), this was changed to vertical-alignment: text-bottom on this wiki. This has created a number of issues as shown below.
Examples
Headings
H2
Lorem ipsum 
(16px, unspecified) dolor sit amet
- Good
Lorem ipsum (16px, middle) dolor sit amet
- Good
Lorem ipsum (16px, text-bottom) dolor sit amet
- Poor: misaligned (sits too low below ascenders, parentheses, and the middle of the x-height)
Lorem ipsum 
(22px, unspecified) dolor sit amet
- Good
Lorem ipsum (22px, middle) dolor sit amet
- Good
Lorem ipsum (22px, text-bottom) dolor sit amet
- Poor: slightly misaligned (sits too low below ascenders, parentheses, and the middle of the x-height)
Lorem ipsum 
(intrinsic:48px, unspecified) dolor sit amet
- Okay: too big (20.71px), but increases spacing above and below the line equally (10.355px:10.355px)
Lorem ipsum (intrinsic:48px, middle) dolor sit amet
- Okay: too big (20.71px), but increases spacing above and below the line equally (10.355px:10.355px)
Lorem ipsum (intrinsic:48px, text-bottom) dolor sit amet
- Bad: too big (20.71px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), and increases spacing above the line by an increased amount (22.67px)
H3
Lorem ipsum (16px, unspecified) dolor sit amet
- Good
Lorem ipsum (16px, middle) dolor sit amet
- Good
Lorem ipsum (16px, text-bottom) dolor sit amet
- Good: same result as middle
Lorem ipsum (22px, unspecified) dolor sit amet
- Good
Lorem ipsum (22px, middle) dolor sit amet
- Good
Lorem ipsum (22px, text-bottom) dolor sit amet
- Poor: misaligned (sits too high above ascenders, parentheses, and the middle of the x-height)
Lorem ipsum (intrinsic:48px, unspecified) dolor sit amet
- Okay: too big (24px), but increases spacing above and below the line equally (12px:12px)
Lorem ipsum (intrinsic:48px, middle) dolor sit amet
- Okay: too big (24px), but increases spacing above and below the line equally (12px:12px)
Lorem ipsum (intrinsic:48px, text-bottom) dolor sit amet
- Bad: too big (24px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), and increases spacing above the line by an increased amount (28.67px)
H4
Lorem ipsum (16px, unspecified) dolor sit amet
- Good
Lorem ipsum (16px, middle) dolor sit amet
- Good
Lorem ipsum (16px, text-bottom) dolor sit amet
- Poor: misaligned (sits too high above ascenders, parentheses, and the middle of the x-height)
Lorem ipsum (22px, unspecified) dolor sit amet
- Okay: slightly too big (0.98px), but increases spacing above and below the line equally (0.49px:0.49px)
Lorem ipsum (22px, middle) dolor sit amet
- Okay: slightly too big (0.98px), but increases spacing above and below the line equally (0.49px:0.49px)
Lorem ipsum (22px, text-bottom) dolor sit amet
- Bad: slightly too big (0.98px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), and increases spacing above the line by an increased amount (3.33px)
Lorem ipsum (intrinsic:48px, unspecified) dolor sit amet
- Okay: too big (25.6px), but increases spacing above and below the line equally (12.8px:12.8px)
Lorem ipsum (intrinsic:48px, middle) dolor sit amet
- Okay: too big (25.6px), but increases spacing above and below the line equally (12.8px:12.8px)
Lorem ipsum (intrinsic:48px, text-bottom) dolor sit amet
- Bad: too big (25.6px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), and increases spacing above the line by an increased amount (29.33px)
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. 
(16px, unspecified) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Poor: misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), and inconsistent with the default alignment within other elements
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (16px, middle) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Good
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (16px, text-bottom) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Poor: misaligned (sits too high above ascenders, parentheses, and the middle of the x-height)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (22px, unspecified) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Bad: very slightly too big (0.04px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), increases spacing above the line by an increased amount (2.67px), and inconsistent with the default alignment within other elements
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (22px, middle) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Okay: very slightly too big (0.04px), but increases spacing above and below the line equally (0.02px:0.02px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (22px, text-bottom) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Bad: very slightly too big (0.04px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), increases spacing above the line by an increased amount (2.67px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (intrinsic:48px, unspecified) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Bad: too big (24px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), increases spacing above the line by an increased amount (28.67px), and inconsistent with the default alignment within other elements
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (intrinsic:48px, middle) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Okay: too big (24px), but increases spacing above and below the line equally (12px:12px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna nunc, tristique quis enim vitae, dignissim finibus turpis.
Nam posuere nisi vitae vulputate ornare. (intrinsic:48px, text-bottom) Nunc sem arcu, feugiat at mollis sit amet, iaculis eu magna.
Nulla a tellus in sem tincidunt mattis. In eget blandit velit. Vivamus placerat scelerisque ante sit amet venenatis.
- Bad: too big (24px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), and increases spacing above the line by an increased amount (28.67px)
Lists
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (16px, unspecified) dolor sit amet
- Lorem ipsum dolor sit amet
- Good
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (16px, middle) dolor sit amet
- Lorem ipsum dolor sit amet
- Good
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (16px, text-bottom) dolor sit amet
- Lorem ipsum dolor sit amet
- Poor: misaligned (sits too high above ascenders, parentheses, and the middle of the x-height)
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (22px, unspecified) dolor sit amet
- Lorem ipsum dolor sit amet
- Okay: very slightly too big (0.04px), but increases spacing above and below the line equally (0.02px:0.02px)
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (22px, middle) dolor sit amet
- Lorem ipsum dolor sit amet
- Okay: very slightly too big (0.04px), but increases spacing above and below the line equally (0.02px:0.02px)
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (22px, text-bottom) dolor sit amet
- Lorem ipsum dolor sit amet
- Bad: very slightly too big (0.04px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), increases spacing above the line by an increased amount (2.67px)
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (intrinsic:48px, unspecified) dolor sit amet
- Lorem ipsum dolor sit amet
- Okay: too big (24px), but increases spacing above and below the line equally (12px:12px)
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (intrinsic:48px, middle) dolor sit amet
- Lorem ipsum dolor sit amet
- Okay: too big (24px), but increases spacing above and below the line equally (12px:12px)
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum (intrinsic:48px, text-bottom) dolor sit amet
- Lorem ipsum dolor sit amet
- Bad: too big (24px), misaligned (sits too high above ascenders, parentheses, and the middle of the x-height), and increases spacing above the line by an increased amount (28.67px)
Results
| Height | unspecified | middle | text-bottom |
|---|---|---|---|
| Headings | |||
| H2 | |||
| 16px | Good | Good | Poor |
| 22px | Good | Good | Poor |
| 48px | Okay | Okay | Bad |
| H3 | |||
| 16px | Good | Good | Good |
| 22px | Good | Good | Poor |
| 48px | Okay | Okay | Bad |
| H4 | |||
| 16px | Good | Good | Poor |
| 22px | Okay | Okay | Bad |
| 48px | Okay | Okay | Bad |
| Paragraphs | |||
| 16px | Poor | Good | Poor |
| 22px | Bad | Okay | Bad |
| 48px | Bad | Okay | Bad |
| Lists | |||
| 16px | Good | Good | Poor |
| 22px | Okay | Okay | Bad |
| 48px | Okay | Okay | Bad |
Clearly vertical-align: middle is a better default in all these cases, and the change to it within paragraphs is an outlier.
Impacted cases
Generally anywhere pre-existing markup defines an inline image with an unspecified vertical alignment that either was not designed exclusively for use within paragraphs only (thus it would have still shown and been intended to use the middle alignment default, or been knowingly inconsistent and left as best effort/majority case for use within other elements) or pre-dated the change to the default alignment in paragraphs. I expect this to apply to almost all cases of inline images.
- User signatures containing inline images unspecified alignment
- Are inconsistently aligned between the first comment (paragraph) and any subsequent comments (description list)
- When over 23px for headers or 16px for body text
- Add an increased amount of spacing above the line, by more than just the amount they are too tall for the line-height
- Templates containing inline images with unspecified alignment that can be used in more than just paragraphs
- Are inconsistently aligned between usage within paragraphs and other elements
- Are no longer correctly aligned as intended (middle)*
- When over 23px for headers or 16px for body text
- Add an increased amount of spacing above the line, by more than just the amount they are too tall for the line-height
* Assuming they meet the caveat on how and/or when they were designed
Solutions
- Fix all impacted cases
- By bot and making users fix their signatures themselves
- Manually as they are encountered, with admins fixing protected cases, and making users fix their signatures themselves
- Revert the change to the default alignment in paragraphs and specify alignment for any cases where text-bottom alignment was intended
- Manually, as they appear to be so few if any.
Clearly the last option makes the most sense.
Notes
- The only place I can see a benefit for text-bottom is for singles lines of body text with 16px inline images next to text that will never have any descenders or parentheses (e.g. prices), as they will look more aligned than middle. This is by far the more specific case, so templates (and any automatically inserted code) for that usage should specify that alignment and usage (they currently don't).
- I can only assume this change was from someone's subjective opinion that text-bottom just looks nicer, or that they only ever considered it without descenders and parentheses, with only one size of text.
- Regardless of why, this change of default for paragraphs only was clearly made without consideration to all the cases where it would make things worse and/or would be inconsistent with the places it didn't change.
- As well as being set for
p img, it is also set for.ajaxttlink>img, .linkicon img, which still doesn't appear to be a special case that warrants it, so it should be removed there too for the same reasons.