Edgewall Software

Opened 3 years ago

Last modified 4 months ago

#13191 assigned enhancement

relative image size with "em" units

Reported by: clemens Owned by: Ryan J Ollos
Priority: normal Milestone: 1.4.5
Component: wiki system Version: 1.2.3
Severity: normal Keywords: bitesized consider
Cc: c.feige@… Branch:
Release Notes:
API Changes:
Internal Changes:


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.



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.


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.

Attachments (4)

relative_image_size_support_patch_suggestion_v01 (838 bytes ) - added by Hong Choi 15 months ago.
relative-image-size-support__patch-v02.diff (2.8 KB ) - added by Hong Choi <nik@…> 15 months ago.
relative-image-size-support_patch-v03.patch (3.5 KB ) - added by Hong Choi <nik@…> 14 months ago.
relative-image-size-support_patch-v04.patch (3.4 KB ) - added by Hong Choi <nik@…> 14 months ago.
remove an unnecessary line

Download all attachments as: .zip

Change History (21)

comment:1 by Clemens <c.feige@…>, 3 years ago

Cc: c.feige@… added

comment:2 by Christian Boos, 3 years ago

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

comment:3 by Ryan J Ollos, 3 years ago

Milestone: next-stable-1.2.x

comment:4 by Jun Omae, 3 years ago

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

in reply to:  4 comment:5 by Clemens <c.feige@…>, 3 years ago

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.

comment:6 by Ryan J Ollos, 2 years ago

Milestone: next-stable-1.2.xnext-stable-1.4.x

comment:7 by Hong Choi <nik@…>, 15 months ago

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. :)

by Hong Choi <nik@…>, 15 months ago

comment:8 by Hong Choi <nik@…>, 15 months ago

Submitted new patch file with related unit tests.

comment:9 by Jun Omae, 15 months ago

+                    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.

by Hong Choi <nik@…>, 14 months ago

comment:10 by Hong Choi <nik@…>, 14 months ago

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

by Hong Choi <nik@…>, 14 months ago

remove an unnecessary line

comment:11 by Hong Choi <nik@…>, 14 months ago

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

comment:12 by Ryan J Ollos, 14 months ago

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

comment:13 by Hong Choi<nik@…>, 14 months ago

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

comment:14 by Ryan J Ollos, 14 months ago

Milestone: next-stable-1.4.x1.4.3

comment:15 by Ryan J Ollos, 14 months ago

Owner: set to Ryan J Ollos
Status: newassigned

comment:16 by Ryan J Ollos, 12 months ago


comment:17 by Ryan J Ollos, 4 months ago


Modify Ticket

Change Properties
Set your email in Preferences
as assigned The owner will remain Ryan J Ollos.
The ticket will be disowned. Next status will be 'new'.
as The resolution will be set. Next status will be 'closed'.
to The owner will be changed from Ryan J Ollos to the specified user.

Add Comment

E-mail address and name can be saved in the Preferences .
Note: See TracTickets for help on using tickets.