Wrong sizes on high resolution screens about svg-tag-mode HOT 44 OPEN

I've figured it out but it will be a few days until I get around to a pull-request.

from svg-tag-mode.

Thanks for these tests. The last version seems better but the baseline seems a bit off.

from svg-tag-mode.

You mean font-size in the svg-textpart?

Yessir

from svg-tag-mode.

Hello,

I come back to this thread because I still have this issue.

My configuration is emacs master from a couple of weeks on windows 11 and on a hidpi screen (3000x2000). The default display zoom is 250%.

Here is an org file without ``svg-tag-mode` :

Then Alt X svg-tag-mode gives :

The svg are sensibly bigger than the text.

I digged a little in svg-tag-make, looking for a scale option as an example, but did not find anything useful.

Because images are svg, I am quite convinced that there should exist an easy way to rescale images. For example, if you are a math-preview user, there is an option to make the svg bigger or smaller.

I would love to use svg-tag-mode more extensively. How could I fix this issue ?

Regards

EDIT : it happens only with a hidpi screen with a zoom applied. With another screen, svg sizes are correct

from svg-tag-mode.

Thanks for the report. For the weird calling for high resolution, do you know if this is related to the difference between actual scrren resolution vs system resolution? Also, on your screenshot, what is the font size of text?

from svg-tag-mode.

Just added :scale 1 to the svg image but since I cannot reproduce the bug, it's hard to tell if it has any effect. I also tried changing my system resolution (OSX) and it's still working as expected. What are the values (window-font-width) and (window-font-height)?

from svg-tag-mode.

do you know if this is related to the difference between actual scrren resolution vs system resolution?

I don't know. I am using the monitors native resolution.

Just added :scale 1 to the svg image but since I cannot reproduce the bug, it's hard to tell if it has any effect.

I already tried that. It doesn't seem to do anything.

The only documentation I could find about this is in create-image's doc-string:

If the property `:scale' is not given and the
display has a high resolution (more exactly, when the average width of a
character in the default font is more than 10 pixels), the image is
automatically scaled up in proportion to the default font.

(list (window-font-width)
      (window-font-height))
=> (13 27)

from svg-tag-mode.

Could you evaluate

(let* ((w (window-font-width))
       (h (window-font-height))
       (svg (svg-create w h)))
  (svg-rectangle svg 0 0 w h :stroke "black" :fill "none")
  (svg-text svg "A"
            :x           0
            :y           (- h 4)
            :font-family "Roboto Mono Emacs Regular"
            :font-size   14
            :fill        "black")
  (insert-image (svg-image svg :scale 1 :ascent 'center)))

Replacing the font-family and font size with yours. After evaluating the SVG and type "A" just next to the svg image in order to compare SVG text size vs emacs text size?

from svg-tag-mode.

Replacing the font-family and font size with yours.

How does one determine the font size? (face-attribute 'default :height) returns 158, which isn't in the same ballpark as 14.

from svg-tag-mode.

Anyway, I think the value is 16, because I have set Emacs.font: Source Code Pro-16 in .Xresources. With that evaluating the above code inserts something invisible that has the correct proportions (i.e. the visual effect is the same as just inserting a plain old space).

from svg-tag-mode.

The size is expressed in 1/10th of point hence 158 is 16. If you can't seen the letter, you can :y 0 instead of :y (- h 4)

from svg-tag-mode.

If I can contribute to this: I seem to be seeing the same problem on a high-resolution screen, with X set to 144 DPI. Using the test code above, I need to bump the font-size up to 19 to look approximately the same size as a normally-typed A, while my actual font size is 8 (which is not nearly as tiny as it would seem, thanks to the high DPI).

I also note that if I omit the font-size line in the code above, then it does draw as the correct size.

from svg-tag-mode.

You mean font-size in the svg-textpart?

from svg-tag-mode.

Hi,

Just tried on windows 10. My screen is hidpi and I can barely see the text within the box

from svg-tag-mode.

We're trying to debug it. Can you try code at #14 (comment) (and post in the same thread)?

from svg-tag-mode.

I'm having the same issue, here's how it looks in org-mode:

And with the snippet (which I tweaked) you asked to evaluate, in elisp-mode :

With the same snippet, but in emacs-lisp-mode, it does insert something, but it looks to be the wrong size and it's either white-on-white or too small to be seen: Ok, SVGs are only displayed when the major-mode is a text-mode.

I'm on Windows, with Emacs 27.2 a resolution of 2560x1440 and no scaling. Also, I must point out that my emacs configuration is pretty empty at the moment, so it is unlikely it's caused by a conflict with another package or configuration

from svg-tag-mode.

Sorry for late answer. Can you try to remove the :scale 1.0 in the svg-image ?

from svg-tag-mode.

Also, can you have a look at #14 (comment) (maybe best to continue discussion on this PR actually)

from svg-tag-mode.

Here, I did some test (I didn't look at the PR yet).

(save-excursion
  (forward-paragraph)
  (progn ;; Delete til end of file
    (delete-region (point) (point-max)))
  (cl-loop
   for font-family in (list "Roboto Mono Emacs Regular" "Roboto Mono" (face-attribute 'default :family)) do
   (cl-loop
    for font-size in (list 14 (face-attribute 'default :height)) do
    (let* ((canvas-scale 8.0)
	   (w (* canvas-scale (window-font-width)))
	   (h (* canvas-scale (window-font-height)))
	   (svg (svg-create w h)))
      (svg-rectangle svg 0 0 w h :stroke "black" :fill "none")
      (svg-text svg "A"
		:x           0
		:y           (- h 4)
		:font-family "Roboto Mono Emacs Regular"
		:font-size   font-size
		:fill        "black")
      (insert "\n")
      (insert "A")
      (insert-image (svg-image svg :scale 1 :ascent 'center))
      (insert-image (svg-image svg :ascent 'center))
      (insert "\t" font-family " - " (format "%s" font-size))))))
(face-attribute 'default :family) ;; => "Courier New"
(face-attribute 'default :height) ;; => 98

from svg-tag-mode.

Ok, @rougier I took a look at the comment you linked and I added the code next to what I tried, it work very well:

(save-excursion
  (forward-paragraph)
  (progn ;; Delete til end of file
    (delete-region (point) (point-max)))
  (cl-loop
   for font-family in (list ;; "Roboto Mono Emacs Regular"
		       "Roboto Mono"
		       (face-attribute 'default :family))
   do
   (cl-loop
    for font-size in (list 14
			   (face-attribute 'default :height)
			   (elt (query-font (font-at (point-min))) 3))
    do
    (let* ((canvas-scale (+ 0.5 (/ font-size 14)))
	   (w (* canvas-scale (window-font-width)))
	   (h (* canvas-scale (window-font-height)))
	   (svg (svg-create w h)))
      (svg-rectangle svg 0 0 w h :stroke "black" :fill "none")
      (svg-text svg "A"
		:x           0
		:y           (- h 4)
		:font-family "Roboto Mono Emacs Regular"
		:font-size   font-size
		:fill        "black")
      (insert "\n")
      (insert "A")
      (insert-image (svg-image svg :scale 1 :ascent 'center))
      (insert-image (svg-image svg :ascent 'center))
      (insert "\t" font-family " - " (format "%s" font-size) " ")
      (let* ((text "Hello guys!")
	     (font       (query-font (font-at (point-min))))
	     (font-size  (elt font 2))
	     (family     (face-attribute 'default :family))
	     (descent    (elt font 4))
	     (ascent     (elt font 5))
	     (svg-height (+ ascent descent))
	     (char-width (elt font 7))
	     (svg-width  (* char-width (length text)))
	     (svg        (svg-create svg-width svg-height)))
	(svg-rectangle svg 0 0 svg-width svg-height :stroke "black" :fill "none")
	(svg-text svg text
		  :fill "red"
		  :stroke-width 0
		  :font-family family
		  :font-weight "300"
		  :font-size font-size
		  :x 0
		  :y descent)
	(insert-image (svg-image svg :ascent 'center)))
      ))))
(face-attribute 'default :family) ;; => "Courier New"
(face-attribute 'default :height) ;; => 98
(font-at (point)) ;; =>  #<font-object "-outline-Fira Mono-normal-normal-normal-mono-13-*-*-*-c-*-iso8859-1">

from svg-tag-mode.

Any hints ?

from svg-tag-mode.

Where does the zoom comes from exactly ? From outside emacs?

from svg-tag-mode.

Yes, this is a zoom applied by windows 11.

By tweaking some parameters in svg-lib functions, I managed to get something better, not yet usable though.
It seems that the scale parameter is ignored.

This issue definitely comes from the screen zoom. With another computer (same emacs config) and another screen, which does not need zooming, the text and its svg counter part are equivalent in size and appearance.

I do not remember the tweaks but I will let you know as soon as I have time.

Regards

from svg-tag-mode.

It might be possible to retrieve the magnification factor from inside emacs but I'm not sure how. Maybe through DPI computation. See also https://emacs.stackexchange.com/questions/28390/quickly-adjusting-text-to-dpi-changes

from svg-tag-mode.

Yes, but then, how to use it ? as an argument to svg-tag-make ?

I will try do debug that soon.

Regards

from svg-tag-mode.

Not sure how to use it, but most probably you can use the zoom factor for char-height and char-width.

from svg-tag-mode.

Hi,

I was able to correct my issue by manually modifying the font-size and height parameters which are given to svg-lib-tag function.

This is only a workaround. I plan to uncomment the scale parameter in svg-lib-tag and
define a default scale value which will manually adjust the font size (character width and height) and the svg height.

Regards

from svg-tag-mode.

Yes, but the idea is to have all of these calculations to be automated. It seems to be a reccuring problem though. Each time we solve one case, a new one pops out... Best would be to understand the origin of the problem or to find a parameter we could use.

from svg-tag-mode.

I finally got it working by modifying the svg-lib-tag function :

(defun svg-lib-tag (label &optional style &rest args)
  "Create an image displaying LABEL in a rounded box using given STYLE
and style elements ARGS."

  (let* ((default svg-lib-style-default)
         (style (if style (apply #'svg-lib-style nil style) default))
         (style (if args  (apply #'svg-lib-style style args) style))

         (foreground  (plist-get style :foreground))
         (background  (plist-get style :background))

         (crop-left   (plist-get style :crop-left))
         (crop-right  (plist-get style :crop-right))

         (alignment   (plist-get style :alignment))
         (stroke      (plist-get style :stroke))
         (width       (plist-get style :width))
         (height      (plist-get style :height))
         (radius      (plist-get style :radius))
         ;; (scale       (plist-get style :scale))
         (margin      (plist-get style :margin))
         (padding     (plist-get style :padding))
         (font-size   (plist-get style :font-size))
         (font-family (plist-get style :font-family))
         (font-weight (plist-get style :font-weight))

         (txt-char-width  (plist-get style :txt-char-width))
         (txt-char-height (plist-get style :txt-char-height))

         (txt-char-height (if line-spacing
                              (+ txt-char-height line-spacing)
                          txt-char-height))
         (font-info       (font-info (format "%s-%d" font-family font-size)))
         (font-size       (aref font-info 2)) ;; redefine font-size
         (ascent          (aref font-info 8))
         (tag-char-width  (aref font-info 11))
         ;; (tag-char-height (aref font-info 3))
         (tag-width       (* width (* (+ (length label) padding) txt-char-width)))
         (tag-height      (* txt-char-height height))

         (svg-width       (+ tag-width (* margin txt-char-width width)))
         (svg-height      tag-height)

         (tag-x  (* (- svg-width tag-width)  alignment))
         (text-x (+ tag-x (/ (- tag-width (* (length label) tag-char-width)) 2)))
         (text-y ascent)

         (tag-x      (if crop-left  (- tag-x     txt-char-width) tag-x))
         (tag-width  (if crop-left  (+ tag-width txt-char-width) tag-width))
         (text-x     (if crop-left  (- text-x (/ stroke 2)) text-x))
         (tag-width  (if crop-right (+ tag-width txt-char-width) tag-width))
         (text-x     (if crop-right (+ text-x (/ stroke 2)) text-x))

         (svg (svg-create svg-width svg-height)))

    (if (>= stroke 0.25)
        (svg-rectangle svg tag-x 0 tag-width tag-height
                           :fill foreground :rx radius))
    (svg-rectangle svg (+ tag-x (/ stroke 2.0)) (/ stroke 2.0)
                       (- tag-width stroke) (- tag-height stroke)
                       :fill background :rx (- radius (/ stroke 2.0)))
    (svg-text svg label
              :font-family font-family :font-weight font-weight  :font-size font-size
              :fill foreground :x text-x :y  text-y)
    (svg-lib--image svg :ascent 'center)))

where I introduced txt-char-width and txt-char-height. Those appears to be badly set by respectively window-font-width and window-font-height functions.

I also uncommented the width parameter which acts like the height one.

Then, to get a svg with correct size appearance, I have to call svg-lib-tag as follows :

(svg-lib-tag "TODO" nil :height 0.5 :width 0.5 :font-size 8

Regards

from svg-tag-mode.

The 0.5 is because of your desktop magnification?

from svg-tag-mode.

Hi,

just a small comment to say that the solution described by @deb75 did not to work for me as is. Instead I tweaked (in a very hackish way I am sure) svg-lib-tag with a scaling of 0.3.
Maybe this can help someone having the same problem.

(defun svg-lib-tag (label &optional style &rest args)
  "Create an image displaying LABEL in a rounded box using given STYLE
and style elements ARGS."

  (let* ((default svg-lib-style-default)
         (my-scale 0.3)
         (style (if style (apply #'svg-lib-style nil style) default))
         (style (if args  (apply #'svg-lib-style style args) style))

         (foreground  (plist-get style :foreground))
         (background  (plist-get style :background))

         (crop-left   (plist-get style :crop-left))
         (crop-right  (plist-get style :crop-right))

         (alignment   (plist-get style :alignment))
         (stroke      (plist-get style :stroke))
         ;; (width       (plist-get style :width))
         (height      (plist-get style :height))
         (radius      (plist-get style :radius))
         ;; (scale       (plist-get style :scale))
         (margin      (plist-get style :margin))
         (padding     (plist-get style :padding))
         (font-size   (plist-get style :font-size))
         (font-family (plist-get style :font-family))
         (font-weight (plist-get style :font-weight))

         (txt-char-width  (window-font-width))
         (txt-char-height (window-font-height))
         (txt-char-height (if line-spacing
                              (+ txt-char-height line-spacing)
                            txt-char-height))
         (font-info       (font-info (format "%s-%d" font-family font-size)))
         (font-size       (aref font-info 2)) ;; redefine font-size
         (ascent          (aref font-info 8))
         (tag-char-width  (aref font-info 11))
         ;; (tag-char-height (aref font-info 3))
         (tag-width       (* (+ (length label) padding) txt-char-width))
         (tag-height      (* txt-char-height height))
         
         
         (svg-width       (+ tag-width (* margin txt-char-width)))
         (svg-height      tag-height)
         (svg-ascent      (plist-get style :ascent))
         
         ;;(stroke (* stroke my-scale))
         (ascent (* ascent my-scale))
         
         
         (tag-x  (* (- svg-width tag-width)  alignment))
         (text-x (+ tag-x (/ (- tag-width (* (length label) tag-char-width)) 2)))
         (text-y ascent)


         (tag-x      (if crop-left  (- tag-x     txt-char-width) tag-x))
         (tag-width  (if crop-left  (+ tag-width txt-char-width) tag-width))
         (text-x     (if crop-left  (- text-x (/ stroke 2)) text-x))
         (tag-width  (if crop-right (+ tag-width txt-char-width) tag-width))
         (text-x     (if crop-right (+ text-x (/ stroke 2)) text-x))

         (svg-width (* svg-width my-scale))
         (svg-height (* svg-height my-scale))

         (svg (svg-create svg-width svg-height))
         (font-size (* font-size my-scale))
         (tag-width (* tag-width my-scale))
         (tag-height (* tag-height my-scale))

         (text-x (* text-x my-scale))
         (radius (* radius my-scale))
         (tag-x (* tag-x my-scale))
         )

         

    (when (>= stroke 0.25)
      (svg-rectangle svg tag-x 0 tag-width tag-height
                     :fill foreground :rx radius))
    (svg-rectangle svg (+ tag-x (/ stroke 2.0)) (/ stroke 2.0)
                       (- tag-width stroke) (- tag-height stroke)
                       :fill background :rx (- radius (/ stroke 2.0)))
    (svg-text svg label
              :font-family font-family :font-weight font-weight  :font-size font-size
              :fill foreground :x text-x :y  text-y)
    (svg-lib--image svg :ascent svg-ascent)))

This worked for me. And yes the 0.3 in the code is due to the zoom of my hidpi screen. I am on linux and I use roughly a x3 zoom.

from svg-tag-mode.

Thanks for the report. Do you know of a way to get that factor from inside emacs?

from svg-tag-mode.

I didn't, but from one of the previous discussion there is this https://emacs.stackexchange.com/a/44930/37788 and using the my-dpi function described here, I got the value 283.358724043255 .

The real dpi (which represents the screen zoom from what I understand) is set to 288 for me using xrandr at the beginning of my X session (hence the around x3 zoom mentioned above which corresponds to dpi/100).

from svg-tag-mode.

But what is the relation with the 0.3 scaling you're using ? Is there a default dpi somewhere that we need to take into account?

from svg-tag-mode.

By default Xorg set dpi to 96 (ref https://wiki.archlinux.org/title/xorg#Display_size_and_DPI) , so my 288 / 96 gives me the x3 zoom.

I don't know how windows does it, I also don't know about Wayland.

from svg-tag-mode.

Can you check if changing the OS dpi make your formula consistent?

from svg-tag-mode.

Yes, here is with dpi 288 and svg-lib my-scale 0.33:

and here is the exact same text with dpi 150 and svg-lib my-scale 0.64:

This seems to be Ok from what I can tell the formula works to have svg scaled like the text.

from svg-tag-mode.

Thanks. Can you post here the function to get the scale such I can test it on my setup?

from svg-tag-mode.

Yes, here it is, with the result from my high dpi computer

#+begin_src emacs-lisp
(defun my-scale (&optional frame)
  "Get the Scale of FRAME (or current if nil), with convention that default dpi is 96."
  (cl-flet ((pyth (lambda (w h)
                    (sqrt (+ (* w w)
                             (* h h)))))
            (mm2in (lambda (mm)
                     (/ mm 25.4)))) ;; one inch is 2.54 cm
    (let* ((atts (frame-monitor-attributes frame))
           (pix-w (cl-fourth (assoc 'geometry atts)))
           (pix-h (cl-fifth (assoc 'geometry atts)))
           (pix-d (pyth pix-w pix-h))
           (mm-w (cl-second (assoc 'mm-size atts)))
           (mm-h (cl-third (assoc 'mm-size atts)))
           (mm-d (pyth mm-w mm-h)))
      (/ (/ pix-d (mm2in mm-d)) 96) ;; by default screen is set to 96 dpi with xrandr
      )))
(my-scale)
#+end_src

#+RESULTS:
: 2.9516533754505727

from svg-tag-mode.

And I get 1.3754182138787545 on my system which is wrong since I do not need a scale. If I replace 96 with (org--get-display-dpi) it seems to be working. Does that work for you too?

(defun org--get-display-dpi ()
  "Get the DPI of the display.
The function assumes that the display has the same pixel width in
the horizontal and vertical directions."
  (if (display-graphic-p)
      (round (/ (display-pixel-height)
		(/ (display-mm-height) 25.4)))
    (error "Attempt to calculate the dpi of a non-graphic display")))

from svg-tag-mode.

For me, the (org--get-display-dpi) should not replace the 96, it replaces my-dpi, its value is 289 for me, so using this function I get the zoom with

(defun my-scale (&optional frame)
  "Get the Scale of FRAME (or current if nil), with convention that default dpi is 96."
  (/ (org--get-display-dpi) 96))

which results in 3 for me (this is in fact more precise than the dpi function proposed before).

from svg-tag-mode.

We thus need to find what is the equivalent of this 96 dpi default for all systems.

from svg-tag-mode.

I am guessing you are on Mac OS since according to Wikipedia Mac OS default to 72 dpi which should explain the value you gave above. Wikipedia also says that Windows default to 96 (same as Linux). Maybe detecting the OS would be sufficient ? Plus a user override in case it fails.

from svg-tag-mode.

Even with 72, the scale is wrong in my case.

from svg-tag-mode.