relative image size with "em" units

[clemens]

I am missing the ability to specify the picture size in "em" units. I believe that a picture size relative to the font size would be an improvement.

Clemens

Motivation

In our environment we often insert pictures like flow diagrams, screen-shots and others figures with much text. Of course our Trac users use different screens, from small laptop screens up to ultra wide screens, some have low resolution some have 4K resolution. Our users also use different desktop and browser magnifications factors like 150%.

Of course we are aware that we can setup the height and width as arguments to the Image-macro:

The height and width can be absolute pixels or relative percentage:

 [[Image(photo.jpg, height=200px)]]
 [[Image(photo.jpg, width=50%)]] 

But neither pixels nor percentage can accommodate for all screen sizes and resolutions. Often pictures are too small or too big.

Proposal

Trac could be improved and offer "em" units for images. It could look like this (note the em unit):

 [[Image(photo.jpg, height=20em)]]
 [[Image(photo.jpg, width=30em)]]

Since I received positive e-Mail feedback from Ryan, I decided to open this ticket. He wrote (in the mailing list on 2019-08-08):

Adding recognition of em units to ImageMacro sounds good to me. That would be a good bitesized ticket for anyone looking to contribute to Trac.

About "em"

Quotation from ​https://www.sitepoint.com/power-em-units-css/ :

The Power of em Units in CSS
In CSS, an em unit is equal to the computed font-size for the element to which the em is applied.

See also: ​https://www.w3.org/Style/Examples/007/units.en.html#units

Note that "em" is not supported by the HTML <img> tag, it needs CSS.

[Christian Boos]

Sure, this would be a useful addition. While we're at it, we should also support it for margin.

[Jun Omae]

I think it is nice to use rem rather than em for the situation. Also, we should support for border.

[Clemens <c.feige@…>]

Replying to Jun Omae:

I think it is nice to use rem rather than em for the situation.

Among web designer seems to be an enduring debate of em vs. rem. See ​here for instance. I am not going to take part in this debate. However, for me em seem a little easier to understand than rem.

One solution to avoid the debate is to offer all i.e. em and rem. User can then use the one or the other, as they like.

Note that there is also the ex unit. As an even more general approach TRAC should probably not restrict the usage of units at all. If rem, ex, cm, pt and other units are officially supported by CSS or HTML, then TRAC could accept them.

[Hong Choi <nik@…>]

Hello. I've just attached a patch file for this ticket. Most of Jun Omae's comments are implemented, in addition to "height" element support as clemens wrote.

Please review and give me some feedback. :)

[Hong Choi <nik@…>]

Submitted new patch file with related unit tests.

[Jun Omae]

+                    elif key == 'width' or key == 'height':

• Should be key in ('width', 'height') in Python.

+                        if val.endswith("em") or val.endswith("pt") or val.endswith("cm") or val.endswith("ex"):
+                            style[key] = val
+                        else:
+                            attr[key] = val

• We must use only valid unit length and ignore invalid text (e.g. width="0;background:url(javascript:...);em"). See self._size_re.
• Also, 2nd parameter is used as width and should accept valid unit length.
• Line should be less than 80 columns.

[Hong Choi <nik@…>]

Attached a new patch file. If there's anything missing, please let me know :)

[Hong Choi <nik@…>]

remove an unnecessary line

[Hong Choi <nik@…>]

I found that there is an unnecessary line on v03 patch. Please see v04.

[Ryan J Ollos]

I revised the comment:11 patch: [63bc1036a9/rjollos.git]. Hong, would you like to add support for margin (comment:2) and border (comment:4)?

[Hong Choi<nik@…>]

I'm happy to do so. But it seems like they are already supported. ;)

Please refer : https://trac.edgewall.org/browser/trunk/trac/wiki/macros.py#L554

[Jun Omae]

Proposed changes in [7945b868b/jomae.git] (jomae.git@t13191_1.4).

• Allow to use the length units in "margin" and "border" parameters of the macro
• Allow to use most of length units except em (rem, pt, vmax, …)

[Jun Omae]

Committed in [17652] and merged in [17653].