View Issue Details

IDProjectCategoryView StatusLast Update
0021691mantisbtuipublic2017-02-28 05:43
Reporterj_schultz Assigned To 
PrioritynormalSeverityminorReproducibilityN/A
Status newResolutionopen 
Product Version2.0.0-beta.2 
Summary0021691: Modern UI: Use SVG rather than icon fonts
Description

I have recently been checking out the work on Mantis 2.0 (which looks pretty good!). While I was pleasantly surprised by many changes, this has also raised some concerns. I realize it may be too late in development to revise this decision, but I still wanted to bring it up, if only to be addressed at a later stage.

My concern are the icon fonts. There are many articles out there which already address issues with these (e.g. https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/ https://www.sitepoint.com/icon-fonts-vs-svg-debate/ and https://www.sitepoint.com/final-nail-icon-fonts-coffin/) but I am going to quickly summarize the most important points:

  • WebFonts are often blocked by security tools like NoScript by default. The site will look completely weird until you explicitely enable JavaScript and WebFonts in NoScript for it.
  • People may disable WebFonts altogether, or enforce a specific font to be used (e.g. OpenDyslexic for dyslexic users). Mantis will be less accessible to these users in the future.
  • Even when ignoring the previous two points, font rendering for icons can still look very awkward in some browsers and operating systems. GitHub has already migrated from icon fonts to SVG for this (and the aforementioned) reason, and I found their blog entry to contain very convincing examples and reasoning: https://github.com/blog/2112-delivering-octicons-with-svg
  • SVG support is pretty good in all supported browsers by now.

Since Mantis 2.0 is not officially released yet, I hope you can still make the transition to SVG icons and not use an already outdated technique by the time the software reaches its first stable version.

Additional Information

This article may help with the transition to SVG: https://sarasoueidan.com/blog/icon-fonts-to-svg/

Tagsmodern-ui

Activities

j_schultz

j_schultz

2017-01-01 12:44

reporter   ~0054885

As I can see, this was sadly not considered for the 2.0.0 release. Would it be possible to address this in a future 2.0.x or 2.x update?

atrol

atrol

2017-01-01 13:16

developer   ~0054886

font rendering for icons can still look very awkward in some browsers and operating systems

Can you provide a screen shot where one of the MantisBT icons looks very awkward?

j_schultz

j_schultz

2017-01-01 13:31

reporter   ~0054887

That part of the comment was more a generic disadvantage of font icons - the Mantis icons look mostly okay here (with a few odd pixels here and there on Firefox).
I made this proposition more because font icons have already been called out as being a bad technology in the past (see my list of disadvantages in the description, in particular the point about dyslexic people).

j_schultz

j_schultz

2017-02-27 07:10

reporter   ~0055787

The first mis-rendered become obvious now. The attached screenshot is taken with Firefox on Windows 7 at normal DPI settings.
As you can see, the "normal priority" icon is not symmetrical, but when zooming in you notice that it should be.
Same with the status icon, which looks very ugly with rounded edges at the bottom but not at the top. I wonder why you insist on using an icon font for something as simple as a square with rounded corners - this can be resolved using an inline-block with border-radius in a much more elegant way, and it will even work when the user overrides their fonts.

font-icon.png (1,376 bytes)   
font-icon.png (1,376 bytes)   
atrol

atrol

2017-02-27 15:50

developer   ~0055808

Same with the status icon, which looks very ugly with rounded edges at the bottom but not at the top.

I was not able to reproduce it using FF 51.0.1 on Windows 7, Windows 10 and macOS 10.12.3.
It looks not 100% perfect, but I get rounded edges on the top.

I wonder why you insist ...

I don't see anyone insisting on anything.
There is just no one at the moment who takes the time to enhance it.

j_schultz

j_schultz

2017-02-27 15:59

reporter   ~0055809

It looks not 100% perfect, but I get rounded edges on the top.

I think it depends on many things, including the moon phase. :) No, more seriously speaking, it probably depends on the exact x/y position where the box is rendered on-screen, and maybe even graphics drivers. I took the screenshot above with Intel integrated graphics, but on AMD graphics I get a slightly rounded edge at the top (but still less rounded than the bottom). This does not happen with SVG icons. So it really would be preferrable to switch from font to SVG icons in a future release.

dregad

dregad

2017-02-28 03:15

developer   ~0055814

it really would be preferrable to switch from font to SVG icons in a future release.

While I fully agree with your advice on principle, to be frank I don't see this happening any time soon; MantisBT 2 relies heavily on a bootstrap template named Ace, and I'm afraid that with our limited resources we won't have the bandwidth to implement such a change in the near future.

@syncguru maybe you care to comment.

atrol

atrol

2017-02-28 03:31

developer   ~0055815

We could at least think about distinguishing between using fonts for icons and using fonts for rounded squares.

j_schultz

j_schultz

2017-02-28 05:43

reporter   ~0055818

I'm not familiar with Bootstrap so I don't know how complicated it would be to e.g. exchange the icons in the main menu, but e.g. replacing the colored squares, priority and attachment icons in the bug tables should be relatively trivial, because all that needs to be done is replacing a styled HTML element with an image element. Of course it's a bit of work, but Bootstrap shouldn't get into the way there. It's only a partial solution but probably still better than nothing, and it will look better on various clients, too.

Issue History

Date Modified Username Field Change
2016-09-13 07:46 j_schultz New Issue
2016-09-13 08:35 atrol Tag Attached: modern-ui
2017-01-01 12:44 j_schultz Note Added: 0054885
2017-01-01 13:16 atrol Status new => feedback
2017-01-01 13:16 atrol Note Added: 0054886
2017-01-01 13:31 j_schultz Note Added: 0054887
2017-01-01 13:31 j_schultz Status feedback => new
2017-02-27 07:10 j_schultz File Added: font-icon.png
2017-02-27 07:10 j_schultz Note Added: 0055787
2017-02-27 15:50 atrol Note Added: 0055808
2017-02-27 15:59 j_schultz Note Added: 0055809
2017-02-28 03:15 dregad Note Added: 0055814
2017-02-28 03:31 atrol Note Added: 0055815
2017-02-28 05:43 j_schultz Note Added: 0055818