https://bugzilla.wikimedia.org/show_bug.cgi?id=66896
Bug ID: 66896
Summary: lease let me size inline images to max-height, with
variable image-sets including client-side reduction,
fix the mobile view
Product: MediaWiki
Version: unspecified
Hardware: All
OS: All
Status: NEW
Severity: normal
Priority: Unprioritized
Component: Parser
Assignee: [email protected]
Reporter: [email protected]
Web browser: ---
Mobile Platform: ---
(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.
--
You are receiving this mail because:
You are the assignee for the bug.
You are on the CC list for the bug.
_______________________________________________
Wikibugs-l mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/wikibugs-l
