Latest advances in CSS Really Advanced Technology |
Latest advances in CSS Really Advanced Technology |
Brian Chandler |
Sep 21 2021, 01:12 AM
Post
#1
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
... I suspect. At the bottom of (eg) https://imaginatorium.com/shop.html is a row of buttons, labelled: FAQ - Cookies - About us - Contact - 日本語
Now, in Chromium (Version 93.0.4577.82) and Firefox (version 68.0.2), these buttons look as you would expect. Each has a legend, positioned in the centre of the button. But in FF ver. 92.0 this has been updated, to look like the attached image. Hmm. This is not what I wanted, nor can I honestly imagine what anyone else would want. I think I can see what is going on, but I wonder if a CSS advocate could explain to me the purpose of this Improvement? (PS: here's the 2-minute guide to Japanese typography: https://imaginatorium.org/words/descend.htm ) This post has been edited by Brian Chandler: Sep 21 2021, 01:15 AM Attached thumbnail(s) |
Christian J |
Sep 21 2021, 08:07 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
Now, in Chromium (Version 93.0.4577.82) and Firefox (version 68.0.2), these buttons look as you would expect. Each has a legend, positioned in the centre of the button. I assume you meant the vertical middle? FWIW, the "vertical-align" property only applies to table cells and inline elements, not inline-block elements like in this case. Also I didn't see any such property specified in the Firefox developer tools (right-click on part of the page and click Inspect and the tools will open, showing all CSS that's applied to the element - can be very useful). QUOTE But in FF ver. 92.0 this has been updated, to look like the attached image. My browsers (both Firefox and Chromium-based) sometimes seem to put the English text a little above middle, just like your screenshot, but this appears to come and go with the Zoom level. The Japanese text seems to remain in the middle. I assume it's just a rendering bug. Other than that I can only speculate that the writing-mode and text-align of mixed English and Japanese somehow causes it. Some newer text properties and -values that I know nothing about: https://www.w3.org/TR/css-writing-modes-3/#...ext-orientation https://www.w3.org/TR/css-text-3/#text-align https://www.w3.org/TR/css-writing-modes-3/#writing-mode QUOTE a CSS advocate Strawman detected! |
Brian Chandler |
Sep 24 2021, 11:14 AM
Post
#3
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Did you look at the 2-minute guide? The point is that Roman letter typography is all about x-height, ascenders, descenders, and the baseline, which is at the bottom of the x-height. If you are aligning characters in different fonts within Roman letter typography, then you align them at the baseline. If you are working outside Roman letter typography, for example with images, icons, or Japanese characters, then the "baseline" does not exist.
But anyway, are you saying you see a similar problem in Chromium (presumably a later version than mine)? You say you think it is a "rendering bug", but I don't understand that as meaning anything other than, "Yes, it's wrong". Where does this leave me? I can experiment with various bits of Roman and non-Roman text in flexbox spaced buttons, and I can try various kludges like wrapping in extra divs. But if the identical "rendering bug" happens in different browsers, does this not suggest there is a problem with the specification of something relating to flexbox? Is there somewhere I should go to report this as a bug? (Sorry, I should have said: in Japanese typography there is no "baseline". But if you translated "baseline" you might well get something like 基準線, which would mean a datum line. And if an ignorant expert (someone with vastly deep knowledge of Roman typography, and effectively zero breadth of vision of the world outside Roman typography) demanded that you provide this 基準線 for a Japanese font, you would have to say it was right in the centre (both horizontally and vertically, actually). Mysteriously, this would lead inexorably to the bug I am complaining about.) This post has been edited by Brian Chandler: Sep 24 2021, 11:18 AM |
Christian J |
Sep 24 2021, 05:01 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
Did you look at the 2-minute guide? Just two minutes. After I tested it on a web page I found another problem. It appears the height of the Latin links are slightly lower, but strangely I didn't see any height difference on your web page. It seems you can fix it by specifying line-height (1em?), but I don't know why. Here's a screenshot from my simplified test page. The links in the second menu have "line-height: 1em" applied: QUOTE But anyway, are you saying you see a similar problem in Chromium (presumably a later version than mine)? You say you think it is a "rendering bug", but I don't understand that as meaning anything other than, "Yes, it's wrong". I should have said that it's a limitation of the browsers, maybe they're designed to sacrifice accuracy for efficiency? Quite often browsers make smaller rounding(?) errors, so that for example a 1px thick border appears 2px thick, or becomes invisible on one side of a box but not the other. I remember being annoyed by this when Firefox was new, I can't remember it happening in MSIE at the time. So I don't think it's a problem with the CSS spec, or an incorrect interpretation of the spec. QUOTE Is there somewhere I should go to report this as a bug? If I'm correct, then no. |
Brian Chandler |
Sep 29 2021, 11:41 PM
Post
#5
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
After I tested it on a web page I found another problem. It appears the height of the Latin links are slightly lower, but strangely I didn't see any height difference on your web page. It seems you can fix it by specifying line-height (1em?), but I don't know why. Here's a screenshot from my simplified test page. The links in the second menu have "line-height: 1em" applied: Oh, at last I found the difference - in the upper row, the *button* for 日本語 is aligned at the bottom, but very slightly higher at the top. To be honest I could not see that at first. This is not the level of problem I am talking about. I have made a test page, here: https://imaginatorium.com/test.html Obviously to report an error as such, I will have to make a minimal page so all the css is separated out, but I would be grateful if you could have a look at this one. There are three rows of buttons, each made with flexbox, and it turns out that the problem I see (on FF 92.0 ) occurs only in the row made using <a> tags (because we're told not to put a button inside an <a> tag). Here is what it looks like: I now see that in the tow and bottom rows there is a variation in button height (they are vertically centred this time), so that buttons with only Roman text are about 2 pixels lower in height. This is absolutely no problem. Curiously, in the real problem row the buttons are all exactly the same height. The real problem row is the middle one, where the legends are not lined up at all. I can't really understand the rest of your post (but if you were trying to do a imitation of a "CCS advocate" you certainly fooled me), but this problem in the middle row cannot be dismissed as "limitation of the browsers" or similar, since they get the top and bottom rows right, and an older FF can get the middle row right as well. Please say you see that the legends are not aligned, and let me know if you can find this problem in any other browser (suggesting a CSS spec error), or not (suggesting a FF error). If you want me to start making a clearer test page, I will, but feedback will help a lot. |
Christian J |
Sep 30 2021, 05:40 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
|
Christian J |
Sep 30 2021, 10:07 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
I experimented a little more, this is what I think happens:
1. The Japanese characters are slightly larger than the Latin. 2. Without "display: flex" on the parent DIV, each individual A element should expand to fit its own content. As a result, A elements containing the larger Japanese text should become slightly higher than those containing Latin only. 3. With "display: flex" on the parent DIV, all the A elements get the same height, determined by the largest one (similar to how table cells expand to fit the highest cell in the row). The Japanese text will then only appear to be in the vertical middle of its A element, because the A is just high enough to contain the Japanese text --if you'd give all the A elements a higher explicit height, the Japanese text should appear visibly at the vertical top, too. To fix this, it seems you can use the following: CODE A.stdbutton { display: flex; align-items: center; } instead of "inline-block", but I don't know enough about flex to know for sure. |
Brian Chandler |
Oct 25 2021, 01:07 PM
Post
#8
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Belated thanks, Christian. I used the "flex for everything" trick as you suggested; basically the defaults are much more sensible, so the inner boxes are vertically aligned in the middle. It is a mystery why this only happens on later versions, but I suppose it is related to the (actual, not-css, measured) size of Japanese text being larger, which is actually a sensible idea. Anyway, lots of other things to struggle with...
|
Lo-Fi Version | Time is now: 13th May 2024 - 01:18 AM |