Using images in tabs (was: bug#37385: 27.0.50; Crash on multibyte assertion violation)

Using images in tabs (was: bug#37385: 27.0.50; Crash on multibyte assertion violation)

[Juri Linkov]

[-- Attachment #1: Type: text/plain, Size: 765 bytes --]

> Stepping a notch back, I cannot say I like this "non-ASCII art"
> implementation for tabs.  It has two annoying problems:
>
>   . it looks unprofessional on GUI frames
>   . it requires you to determine whether the frame/font used for the
>     menu can display this character, which is not easy
>
> Why not use an image of a plus sign on GUI frames, and a simple ASCII
> "+" on TTY frames and frames that have no image support?  I think the
> result will be much better.

The biggest advantage of using “Unicode art” is its scalability for free,
i.e. scalable fonts keep the size of the character used in the close button
proportional to the font size of text in tabs.

I tried a small image with small font size and the result is not bad:


[-- Attachment #2: small_font.png --]
[-- Type: image/png, Size: 2916 bytes --]

[-- Attachment #3: Type: text/plain, Size: 57 bytes --]


But a small image with big font size looks too clumsy:


[-- Attachment #4: large_font.png --]
[-- Type: image/png, Size: 5037 bytes --]

[-- Attachment #5: Type: text/plain, Size: 409 bytes --]


I don't know if the patch to vertically center line content
recently sent here by Jesse, could improve the look to align
the button image to the center of the text line in tabs.

Another advantage of “Unicode art” is that on moving the mouse over the
close button the foreground color of its Unicode text changes to red
simply by using mouse-face.  I don't know how to do the same with images:


[-- Attachment #6: close_red.png --]
[-- Type: image/png, Size: 7317 bytes --]

Re: Using images in tabs (was: bug#37385: 27.0.50; Crash on multibyte assertion violation)

[Eli Zaretskii]

> From: Juri Linkov <juri@linkov.net>
> Cc: emacs-devel@gnu.org
> Date: Fri, 13 Sep 2019 00:18:37 +0300
> 
> The biggest advantage of using “Unicode art” is its scalability for free,
> i.e. scalable fonts keep the size of the character used in the close button
> proportional to the font size of text in tabs.

I agree that using characters is easier in several senses, but I think
the results will be much better if we don't.  E.g., what do you do if
the font doesn't support that character, and how do you determine that
in the first place?

> I tried a small image with small font size and the result is not bad:
> 
> But a small image with big font size looks too clumsy:

Since Emacs 27 now supports native image scaling, you could use that
to scale the image to the appropriate size.  Alternatively, you could
let users customize its size if needed: after all, changing the size
of tab headers is something that should be relatively rare.

> I don't know if the patch to vertically center line content
> recently sent here by Jesse, could improve the look to align
> the button image to the center of the text line in tabs.

The image used should be centered to begin with.  You could also try
playing with :ascent property of images.

> Another advantage of “Unicode art” is that on moving the mouse over the
> close button the foreground color of its Unicode text changes to red
> simply by using mouse-face.  I don't know how to do the same with images:

The same way we do it with tool-bar buttons, I'd say.  The code for
that is already in the display engine, you just need to reuse it.  Or
am I missing something?

Re: Using images in tabs

[Juri Linkov]

[-- Attachment #1: Type: text/plain, Size: 435 bytes --]

>> I don't know if the patch to vertically center line content
>> recently sent here by Jesse, could improve the look to align
>> the button image to the center of the text line in tabs.
>
> The image used should be centered to begin with.  You could also try
> playing with :ascent property of images.

Thanks for the hint.  Using :ascent property with the center value
on images solved the issue, so now tabs are more nice-looking:


[-- Attachment #2: tab-bar-image-buttons.png --]
[-- Type: image/png, Size: 11748 bytes --]

Re: Using images in tabs

[Yuri Khan]

On Mon, 16 Sep 2019 at 05:12, Juri Linkov <juri@linkov.net> wrote:
>
> >> I don't know if the patch to vertically center line content
> >> recently sent here by Jesse, could improve the look to align
> >> the button image to the center of the text line in tabs.
> >
> > The image used should be centered to begin with.  You could also try
> > playing with :ascent property of images.
>
> Thanks for the hint.  Using :ascent property with the center value
> on images solved the issue, so now tabs are more nice-looking:

Do images also play nice with HiDPI?

Re: Using images in tabs

[Eli Zaretskii]

On September 16, 2019 7:15:12 AM GMT+03:00, Yuri Khan <yuri.v.khan@gmail.com> wrote:
> On Mon, 16 Sep 2019 at 05:12, Juri Linkov <juri@linkov.net> wrote:
> >
> > >> I don't know if the patch to vertically center line content
> > >> recently sent here by Jesse, could improve the look to align
> > >> the button image to the center of the text line in tabs.
> > >
> > > The image used should be centered to begin with.  You could also
> try
> > > playing with :ascent property of images.
> >
> > Thanks for the hint.  Using :ascent property with the center value
> > on images solved the issue, so now tabs are more nice-looking:
> 
> Do images also play nice with HiDPI?

If they don't, we need to fix that (and then it is a problem that affects more than just ghis feature).  But using characters instead is not the solution.

Re: Using images in tabs

[Juri Linkov]

>> >> I don't know if the patch to vertically center line content
>> >> recently sent here by Jesse, could improve the look to align
>> >> the button image to the center of the text line in tabs.
>> >
>> > The image used should be centered to begin with.  You could also try
>> > playing with :ascent property of images.
>>
>> Thanks for the hint.  Using :ascent property with the center value
>> on images solved the issue, so now tabs are more nice-looking:
>
> Do images also play nice with HiDPI?

I don't know, I'm using HiDPI and see no problems.  But maybe if
someone prefers Double HiDPI with huge scaling, then we could provide
larger images.  Is it possible to detect such scaling in Emacs?

Re: Using images in tabs

[Lars Ingebrigtsen]

Juri Linkov <juri@linkov.net> writes:

> I don't know, I'm using HiDPI and see no problems.  But maybe if
> someone prefers Double HiDPI with huge scaling, then we could provide
> larger images.  Is it possible to detect such scaling in Emacs?

xg_get_scale and friends?  (For gtk-ish Emacsen.)

-- 
(domestic pets only, the antidote for overdose, milk.)
   bloggy blog: http://lars.ingebrigtsen.no

Re: Using images in tabs

[Clément Pit-Claudel]

On 2019-09-16 16:51, Juri Linkov wrote:
>>>>> I don't know if the patch to vertically center line content
>>>>> recently sent here by Jesse, could improve the look to align
>>>>> the button image to the center of the text line in tabs.
>>>>
>>>> The image used should be centered to begin with.  You could also try
>>>> playing with :ascent property of images.
>>>
>>> Thanks for the hint.  Using :ascent property with the center value
>>> on images solved the issue, so now tabs are more nice-looking:
>>
>> Do images also play nice with HiDPI?
> 
> I don't know, I'm using HiDPI and see no problems.  But maybe if
> someone prefers Double HiDPI with huge scaling, then we could provide
> larger images.  Is it possible to detect such scaling in Emacs?

Would using SVG be an option? I use SVG (with a fallback) in my packages when I support the tool-bar, and it works nicely wrt scaling.

Re: Using images in tabs

[Eli Zaretskii]

> From: Clément Pit-Claudel <cpitclaudel@gmail.com>
> Date: Mon, 16 Sep 2019 18:49:22 -0400
> 
> Would using SVG be an option? I use SVG (with a fallback) in my packages when I support the tool-bar, and it works nicely wrt scaling.

I think we should support any image format that Emacs can support,
including SVG.  Emacs can be built with SVG support, but without PNG
or other formats, and it still should be functional.  And I think if
SVG is supported, we should indeed prefer it.

Re: Using images in tabs

[Juri Linkov]

>> I don't know, I'm using HiDPI and see no problems.  But maybe if
>> someone prefers Double HiDPI with huge scaling, then we could provide
>> larger images.  Is it possible to detect such scaling in Emacs?
>
> xg_get_scale and friends?  (For gtk-ish Emacsen.)

Maybe xg_get_scale should be exposed to Lisp, then find-image
could use it to choose a suitable image specification among e.g.

etc/images/icons/hicolor/16x16/
etc/images/icons/hicolor/24x24/
etc/images/icons/hicolor/32x32/
etc/images/icons/hicolor/48x48/
etc/images/icons/hicolor/128x128/
etc/images/icons/hicolor/scalable/

Similar subdirs could be added to other images as well
because this problem exists for other features, e.g. for
subtree arrows in customization buffers, tool-bar icons, etc.

Re: Using images in tabs

[Juri Linkov]

>>> Do images also play nice with HiDPI?
>>
>> I don't know, I'm using HiDPI and see no problems.  But maybe if
>> someone prefers Double HiDPI with huge scaling, then we could provide
>> larger images.  Is it possible to detect such scaling in Emacs?
>
> Would using SVG be an option? I use SVG (with a fallback) in my
> packages when I support the tool-bar, and it works nicely wrt scaling.

Indeed, like there is etc/images/icons/hicolor/scalable/ we could
also add SVG versions in addition to existing .pbm and .xpm files,
and prefer SVG when the build supports SVG format.

Re: Using images in tabs

[Robert Pluim]

>>>>> On Tue, 17 Sep 2019 23:33:21 +0300, Juri Linkov <juri@linkov.net> said:

    >>> I don't know, I'm using HiDPI and see no problems.  But maybe if
    >>> someone prefers Double HiDPI with huge scaling, then we could provide
    >>> larger images.  Is it possible to detect such scaling in Emacs?
    >> 
    >> xg_get_scale and friends?  (For gtk-ish Emacsen.)

    Juri> Maybe xg_get_scale should be exposed to Lisp, then find-image
    Juri> could use it to choose a suitable image specification among e.g.

I donʼt think lisp should know about the scaling, it should work
tranparently, which to me implies that images that can be scaled
should be used.

Robert

Re: Using images in tabs

[Lars Ingebrigtsen]

Juri Linkov <juri@linkov.net> writes:

> Maybe xg_get_scale should be exposed to Lisp, then find-image
> could use it to choose a suitable image specification among e.g.
>
> etc/images/icons/hicolor/16x16/
> etc/images/icons/hicolor/24x24/
> etc/images/icons/hicolor/32x32/
> etc/images/icons/hicolor/48x48/
> etc/images/icons/hicolor/128x128/
> etc/images/icons/hicolor/scalable/
>
> Similar subdirs could be added to other images as well
> because this problem exists for other features, e.g. for
> subtree arrows in customization buffers, tool-bar icons, etc.

Yup.  Emacs currently auto-scales images using this very er ad-hoc method:

(defun image-compute-scaling-factor (scaling)
[...]
   ((eq scaling 'auto)
    (let ((width (/ (float (window-width nil t)) (window-width))))
      ;; If we assume that a typical character is 10 pixels in width,
      ;; then we should scale all images according to how wide they
      ;; are.  But don't scale images down.
      (if (< width 10)
          1
        (/ (float width) 10))))


-- 
(domestic pets only, the antidote for overdose, milk.)
   bloggy blog: http://lars.ingebrigtsen.no

Re: Using images in tabs

[Juri Linkov]

[-- Attachment #1: Type: text/plain, Size: 502 bytes --]

>> etc/images/icons/hicolor/scalable/
>>
>> Similar subdirs could be added to other images as well
>> because this problem exists for other features, e.g. for
>> subtree arrows in customization buffers, tool-bar icons, etc.
>
> Yup.  Emacs currently auto-scales images using this very er ad-hoc method:
>
> (defun image-compute-scaling-factor (scaling)
> [...]

Meanwhile I tried to scale svg, and the result is not great.
Scaling up makes the image blurred, and scaling down makes the
image smeared.


[-- Attachment #2: close.png --]
[-- Type: image/png, Size: 5847 bytes --]

[-- Attachment #3: Type: text/plain, Size: 873 bytes --]


This is unexpected since svg is supposed to be scalable.

Another problem is that svg background is not transparent -
it takes the background color from the default face.
Like on the screenshot above, the unscaled image
in the buffer has the default brown background, and transparent
svg button on the grey tab-bar takes the same background.

PS: Tried out with this code:

  (defvar tab-bar-button-close
    (let ((svg (svg-create 33 33 :stroke-width 3 :stroke-color "black" :fill-color "none")))
      (svg-circle svg 16 16 12)
      (svg-line svg 10 10 22 22)
      (svg-line svg 10 22 22 10)
      (propertize "x"
                  'display (svg-image svg
                                      :max-width 9 :max-height 9
                                      :margin '(2 . 0)
                                      :ascent 'center)))
    "Button for closing the tab.")

Re: Using images in tabs

[Lars Ingebrigtsen]

Juri Linkov <juri@linkov.net> writes:

> Meanwhile I tried to scale svg, and the result is not great.
> Scaling up makes the image blurred, and scaling down makes the
> image smeared.

Emacs calls the svg library which generates a bunch of pixels that we
then tell X (or whatever) to scale.  This is always going to be blurry.

Instead if you want to scale svg properly, you have to give a :scaling
of 1 (and not :max-width etc) and then somehow instruct the svg library
to render it at whatever size you want to.  Perhaps altering the XML is
the easiest...

> Another problem is that svg background is not transparent -
> it takes the background color from the default face.

The backgrounds are transparent, but we render it towards some
background or other.

-- 
(domestic pets only, the antidote for overdose, milk.)
   bloggy blog: http://lars.ingebrigtsen.no

Re: Using images in tabs

[Alan Third]

On Thu, Sep 19, 2019 at 03:47:12PM +0200, Lars Ingebrigtsen wrote:
> Juri Linkov <juri@linkov.net> writes:
> 
> > Meanwhile I tried to scale svg, and the result is not great.
> > Scaling up makes the image blurred, and scaling down makes the
> > image smeared.
> 
> Emacs calls the svg library which generates a bunch of pixels that we
> then tell X (or whatever) to scale.  This is always going to be blurry.
> 
> Instead if you want to scale svg properly, you have to give a :scaling
> of 1 (and not :max-width etc) and then somehow instruct the svg library
> to render it at whatever size you want to.  Perhaps altering the XML is
> the easiest...

Librsvg appears to be designed to use Cairo to do any resizing for it.
IIRC librsvg does provide a way to change the DPI, but it’s
deprecated.

I’m curious if it would be possible to use Cairo in a toolkit
independent way to resize and render SVG files. The alternative, I
suppose, would be to find a different SVG library.
-- 
Alan Third