Icons werden seit der Umstellung auf den Icon-Font falsch dargestellt (pure structure)
Kurzfassung
Seit der Umstellung des KNX-UF-Iconsets vom SVG-Sprite auf einen Icon-Font (Commit c67a77df9 "replace with iconfont", Februar 2022) werden die Icons in der pure structure anders dargestellt als vorher. Die CSS-Regeln, die die Icons vorher bemaßt haben, wurden dabei nicht angepasst und sind seitdem teilweise wirkungslos.
Vergleich: CometVisu 0.12.6 gegen den aktuellen develop, gleiche Config, gleicher Browser, Design "metal".
Was sich geändert hat
Vorher wurde ein SVG erzeugt:
Heute ein <i>-Element mit einer Klasse des Icon-Fonts:
Problem 1: Die Box der Icons fällt zusammen
designglobals.css bemaßt die Icons so:
Ein <svg> ist ein replaced element, dort wirken width und height. Ein <i> ist ein normales Inline-Element, dort wirken beide nicht. Die Box fällt deshalb auf die Vorschubbreite der Glyphe zusammen. Da die Glyphen des Fonts sehr unterschiedliche Vorschubbreiten haben (gemessen: 0.148em bis 1.0em), fallen schmale Icons besonders auf.
Gemessen am Thermometer-Icon (temp_temperature) in einer Status-Zeile:
Das Icon selbst ist noch da, es hat aber praktisch keine Breite mehr, wodurch das Layout der Zeile verrutscht.
Problem 2: Die Glyphen werden zu groß gezeichnet
Das ist der Punkt, der optisch am meisten auffällt.
Die SVG-Icons haben ihre Box nie ausgefüllt. Die Zeichnung liegt mit Rand in einer gemeinsamen viewBox (30 30 301 301), der tatsächlich gezeichnete Bereich ist kleiner:
Die Glyphen des Icon-Fonts sind dagegen auf die em-Box normiert und zeichnen einheitlich ca. 96 % der font-size. Bei font-size: 36px in der Navbar werden also 34.6 px gezeichnet, wo vorher je nach Icon 25 bis 32 px standen. Die Icons wirken dadurch deutlich größer und "fetter".
Problem 3: Die Glyphen sitzen zu weit oben in ihrer Box
Der Font hat einen Ascent von ca. 0.995em und keinen Descent. Die Glyphe hängt dadurch oben in der Zeilenbox, unterhalb bleibt Luft. Die SVG-Zeichnung war dagegen exakt zentriert:
Ohne Korrektur sitzt die Glyphe rund 2 px zu hoch.
Lösungsvorschlag
Die Box wieder herstellen, die Glyphengröße an die frühere Zeichengröße angleichen und die Glyphe in der Box zentrieren. Die Längen sind relativ zur font-size der Regel selbst, deshalb sind die Werte umgerechnet.
designglobals.css:
designs/metal/basic.css:
Ergebnis, gemessen gegen die 0.12.6-Instanz:
Was sich damit nicht lösen lässt
Die SVG-Zeichnungen füllten ihre Box je Icon unterschiedlich stark aus (gemessen 58 % bis 74 %), der Font normiert dagegen alle Glyphen auf die em-Box. Die font-size, die ein Icon exakt treffen würde, ist deshalb je Icon verschieden:
31 px ist der Mittelwert. Icons an den Rändern dieser Spanne bleiben ein paar Pixel daneben. Das ließe sich nur beheben, indem der Font neu erzeugt wird und dabei die ursprüngliche Größenrelation der einzelnen Icons erhalten bleibt.
Betroffene Versionen
Ab c67a77df9 (Februar 2022), also alles ab 0.13.x. Die Regel in designglobals.css gilt für alle Designs der pure structure, die Navbar-Regel oben ist aus dem Design "metal" - andere Designs haben ggf. eigene Icon-Regeln, die ebenfalls angepasst werden müssten.
Kurzfassung
Seit der Umstellung des KNX-UF-Iconsets vom SVG-Sprite auf einen Icon-Font (Commit c67a77df9 "replace with iconfont", Februar 2022) werden die Icons in der pure structure anders dargestellt als vorher. Die CSS-Regeln, die die Icons vorher bemaßt haben, wurden dabei nicht angepasst und sind seitdem teilweise wirkungslos.
Vergleich: CometVisu 0.12.6 gegen den aktuellen develop, gleiche Config, gleicher Browser, Design "metal".
Was sich geändert hat
Vorher wurde ein SVG erzeugt:
Code:
<div class="label"><svg class="icon"><use xlink:href="#kuf-temp_temperature"></use></svg>Status</div>
Code:
<div class="label"><i class="knxuf-temp_temperature icon"></i>Status</div>
Problem 1: Die Box der Icons fällt zusammen
designglobals.css bemaßt die Icons so:
Code:
.icon {
height: 2em;
width: 2em;
font-size: 1.55em; /* nachträglich ergänzt in b32896d83 "load iconfont css and fix icon size" */
}
Gemessen am Thermometer-Icon (temp_temperature) in einer Status-Zeile:
Code:
0.12.6 (SVG) Box 37 x 35 px aktuell (Font) Box 12 x 29 px
Problem 2: Die Glyphen werden zu groß gezeichnet
Das ist der Punkt, der optisch am meisten auffällt.
Die SVG-Icons haben ihre Box nie ausgefüllt. Die Zeichnung liegt mit Rand in einer gemeinsamen viewBox (30 30 301 301), der tatsächlich gezeichnete Bereich ist kleiner:
Code:
kuf-control_home Box 44x44 gezeichnet 27.1 x 27.1 (62 % der Box) kuf-control_building_s_kg Box 44x44 gezeichnet 32.5 x 32.4 (74 % der Box) kuf-temp_temperature Box 37x35 gezeichnet 9.3 x 24.9 (70 % der Box)
Problem 3: Die Glyphen sitzen zu weit oben in ihrer Box
Der Font hat einen Ascent von ca. 0.995em und keinen Descent. Die Glyphe hängt dadurch oben in der Zeilenbox, unterhalb bleibt Luft. Die SVG-Zeichnung war dagegen exakt zentriert:
Code:
0.12.6, kuf-control_home in einer 44x44-Box:
Abstand links 8.5 oben 8.5 rechts 8.4 unten 8.4 -> zentriert
Lösungsvorschlag
Die Box wieder herstellen, die Glyphengröße an die frühere Zeichengröße angleichen und die Glyphe in der Box zentrieren. Die Längen sind relativ zur font-size der Regel selbst, deshalb sind die Werte umgerechnet.
designglobals.css:
Code:
.icon {
display: inline-block;
font-size: 1.39em; /* zeichnet so groß wie die frühere SVG-Zeichnung */
width: 1.439em; /* entspricht den früheren 2em des umgebenden Textes */
height: 1.367em; /* entspricht den früheren 1.9em des umgebenden Textes */
line-height: 1.333em; /* = height - 0.034em, zentriert die Glyphe vertikal */
text-align: center; /* zentriert die unterschiedlich breiten Glyphen */
vertical-align: middle;
}
Code:
.icon {
height: 1.367em;
line-height: 1.333em;
}
.navbar .pagejump .label > .icon,
.navbar .refresh .label > .icon {
height: 44px !important;
width: 44px !important;
font-size: 31px; /* vorher 36px */
line-height: 42.95px; /* = 44px - 0.034 * 31px */
display: block;
margin: 0 auto;
}
Code:
0.12.6 mit Patch Status-Zeile, Box 37 x 35 37 x 35 Status-Zeile, Zeichnung 24.9, oben 5.3 / unten 5.2 24.9, oben 5.27 / unten 5.27 Navbar, Box 44 x 44 44 x 44 Navbar, Zeichnung 25.4 - 32.5, zentriert 29.8, zentriert
Was sich damit nicht lösen lässt
Die SVG-Zeichnungen füllten ihre Box je Icon unterschiedlich stark aus (gemessen 58 % bis 74 %), der Font normiert dagegen alle Glyphen auf die em-Box. Die font-size, die ein Icon exakt treffen würde, ist deshalb je Icon verschieden:
Code:
fts_window_2w_open_l 26.3px light_light_dim_00 31.7px control_home 28.2px fts_frontdoor 32.4px weather_sun 30.2px control_building_s_* 33.6px secur_alarm 31.0px status_vacation 35.1px
Betroffene Versionen
Ab c67a77df9 (Februar 2022), also alles ab 0.13.x. Die Regel in designglobals.css gilt für alle Designs der pure structure, die Navbar-Regel oben ist aus dem Design "metal" - andere Designs haben ggf. eigene Icon-Regeln, die ebenfalls angepasst werden müssten.
Kommentar