(See also comment 3 in
https://bugzilla.wikimedia.org/show_bug.cgi?id=65883)
We need inline imags in various cases, including where text is dificult to render and an alternate SVG could do the trick, or for displaying small icons (including emoticons and similar icons meaning "Done", "Yes", "No", "Approve"...
However images are currently only supported with static sizes in pixels which do not fit well with the current font size and line-height. Using them inline causes layout problems within paragraphs as these images do not scale cleanly.
HTML offers a clean way to support this using client-side resizing, and it is already used in the Mobile view of our wikis, whose stylesheet uses:
max-width:100% !important;
This causes the browser to rescale the image itself in order to not exceed the specified max-width, even if the image itself has a larger width. This CSS rule however is used with a trick that forces changing the "box-model:" of all block elements from the HTML standard "content-box" to "border-box" (like in old versions of Internet Explorer, or in browsers emulating the "IE quirks mode"), and this breaks lots of pages containining a layout of block elements with non-zero borders or paddings. In my opinion, this change of box-model is a severe bug of the stylesheet used in the Mobile view.
However this stylesheet demonstrates that clients (anot notably all mobile clients such as smartphones and tablets) are perfectly capable of rescaling images themselves to fit in a maximum width (or height).
Here I'm interested to use
max-height: 1.5em;
for rescaling an inline image cleanly to fit within a specified matching line-height:1.5.
However MediaWiki images created with [[Image:...]] or [[File:...]] still do not allow us to add other styles (all styles are generated, as MediaWiki will transform the image by using an <img> element, within an <a> element, itself within a <div> element with custom classes for "block" images using "left/right/center/thumb").
Even with "block" images we would like to have images more easily scaled to fit a relative size according to the container, using "max-width:" and "max-height:" with a percentage of the container's width (normally it is the width content-box of the container, unless the box-model has been changed to emulate the IE-quirks mode), or in a size equal to a given number of text lines (if we know the line-height, this means a "max-height:" for the image set as a multiple of the line-height (on MediaWii the default line-height is 1.5).
Images howver have only a static sizing parameter in pixels (from this size, MEdiaWiki generates an image set whose first image by default uses this size for "width=" and "height=" attributes associatd to the "1x" resolution, and also maps other sizes to "1.5x" and "2x")
What I'd like:
- (1) supporting max-width= and max-height= parameters in [[Image:]] or [[File:]], with sizes given in "em" and not necessarily in pixels. This item is also needed for proper internationlization where text cannot be used and an image is needed.
- (2) supporting another range of scaling values for the image sets (currently: 1x, 1.5x, 2x) with a parameter "scales=", to allow changing this set to support other values lower than 1x (notably 0.5x and 0.75x), or even "native" (only works with SVG images) in order to allow cleaner reductions by the browser, instead of growths (used by browsers whose "logical pixel" resolution is lower than the effective display resolution, notably on smartphones (this grately impoves the readability and sharpness of images. Habing additional values "0.5x and 0.75x" would also allow cleaner client-side reductions of sizes constrained by max-width and/or max-height. This item is also needed for readability/accessibility (including the support of custom zoom levels in browsers, and adaptation to small screen sizes and screens with very high resolutions)
- (3) dropping the forced change of box-model in the Mobile view. This breaks lot of page. The default HTML should be restored. Without it, is is impossible to have a coherent layout between the mobile view, and the desktop view that assumes the default "box-model:" to be "content-box" (which has alsays been the standard in HTML4 and still today in HTML5, except in old versions of IE). Som of our templates will still want to be able to use "box-model:" but it should not be controled by the site-wide stylesheet of the Mobile view that forces it on ALL elements, breaing the inheritance cascade. This item is needed to offer compatibility of pages layouts and templates between desktop and mobile views.
All these items are independant but they work together.
Version: 1.24rc
Severity: enhancement