Open mi5o opened 2 years ago
ouchadam
commented
2 years ago admittedly I'm not a font expert and can't say I've noticed a difference, this could be due to your OS fonts :thinking: from the app side the only difference between the two text fields is the font size is 14sp vs 15sp and some scenarios the text colour has a 20% alpha applied
| LAST MESSAGE | MESSAGE | REPLY |
|---|---|---|
 |
 |
 |
mi5o
commented
2 years ago On the other side, I am the one who has no idea how to add inline images. Which would help significantly in this situation. So I sent you DM over Matrix with tiny (6kB) PNG. Please look at it.
The picture contains a screenshot of a message iii mmm nnn | VAVA | ff fi ffi fl ffl | ff fi ffi fl ffl | r, F. and a reply to the message, saying the same.
Apparently, the original message is displayed with font size 30px, while the response with font size 32px. That said, spaces between letters inside word should be equal or smaller in the upper text than corresponding spaces in the lower text. Which is NOT the case. The gaps in the upper texts are often (but not always) significantly wider.
My best estimate is that the upper text is rendered with font-kerning switched off. See Wikipedia article on font-kerning for explanation. Perhaps looking at the first image of the article might give you sufficient understanding what it is about, even without reading the article.
If you would like to experiment, to see the subtle differences how font-kerning and letter-spacing influence the rendered text, just fire up any modern internet browser, and let it open the following HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><meta charset="utf-8"/><title>Font Kerning</title></head>
<body style="font-size:400%; font-family: sans-serif">
<h1>Font Kerning</h1>
<div style="font-kerning: normal; letter-spacing: -0.1em">NNN VAVA | r, F. | ff fi ffi fl ffl | ff fi ffi fl ffl</div>
<div style="font-kerning: none; letter-spacing: -0.1em">NNN VAVA | r, F. | ff fi ffi fl ffl | ff fi ffi fl ffl</div>
<br/>
<div style="font-kerning: normal; letter-spacing: 0em; color: red">NNN VAVA | r, F. | ff fi ffi fl ffl | ff fi ffi fl ffl</div>
<div style="font-kerning: none; letter-spacing: 0em">NNN VAVA | r, F. | ff fi ffi fl ffl | ff fi ffi fl ffl</div>
<br/>
<div style="font-kerning: normal; letter-spacing: 0.1em">NNN VAVA | r, F. | ff fi ffi fl ffl | ff fi ffi fl ffl</div>
<div style="font-kerning: none; letter-spacing: 0.1em">NNN VAVA | r, F. | ff fi ffi fl ffl | ff fi ffi fl ffl</div>
</body>
</html>(The difference will be even more pronounced with serif font instead of sans-serif, because of ligatures kicking in.)
BTW, AFAIK, the transparency is not taken into account when rendering font glyphs.
ouchadam
commented
1 year ago | IN APP EXAMPLE | HTML |
|---|---|
 |
 |
the examples mentioned above rendered ^^^
Both sent and received messages in a room are displayed using font consistent with the OS settings.
However, quoted messages have unusually wide spacing between letters. Also, the excerpt from the last message, as displayed in a list of rooms, uses this extended letter spacing. The thing is perfectly functional, it just looks disturbing.
Actually, I am running my OS with default settings, regarding font face, font size, and I am even not aware that letter spacing/kerning is configurable. That said, I have not tested, how the application will respond, after me changing my OS settings.
(seen in foss-signed-31.10.2022-V1.apk running in LineageOS)