The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Latest advances in CSS Really Advanced Technology
Brian Chandler
post 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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 21 2021, 08:07 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Sep 21 2021, 08:12 AM) *

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! biggrin.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 24 2021, 05:01 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Sep 24 2021, 06:14 PM) *

Did you look at the 2-minute guide?

Just two minutes. blush.gif

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:

Attached Image


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Sep 29 2021, 11:41 PM
Post #5


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(Christian J @ Sep 25 2021, 07:01 AM) *

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:

Attached Image


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:
Attached Image

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.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 30 2021, 05:40 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Sep 30 2021, 06:41 AM) *

I have made a test page, here: https://imaginatorium.com/test.html

Firefox sometimes shows it, depending on Zoom amount, but now I see it actually looks much worse in my Chromium-based browsers (Edge, Brave, Vivaldi). So it's not a rendering bug as I thought.

Here's Brave with Chromium 94.0.4606.61:

Attached Image


This post has been edited by Christian J: Sep 30 2021, 10:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 30 2021, 10:07 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post 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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 03:52 AM