This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
faq [2021/02/26 10:23] – [Real Physical Lengths] tabatkins | faq [2023/09/21 04:45] (current) – Added note about author's burden of name variants SebastianZ | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Frequently Asked Questions ====== | ====== Frequently Asked Questions ====== | ||
- | |||
- | ===== Styling <sup> And <sub> Using font-variant-position ===== | ||
- | |||
- | === Question === | ||
- | HTML currently specifies the following default styles for sup and sub: | ||
- | |||
- | <code css> | ||
- | sub { vertical-align: | ||
- | sup { vertical-align: | ||
- | sub, sup { line-height: | ||
- | </ | ||
- | |||
- | This works, but this is not very good typography. The following uses fonts the way they' | ||
- | |||
- | <code css> | ||
- | sub { font-variant-position: | ||
- | sup { font-variant-position: | ||
- | </ | ||
- | |||
- | === Answer === | ||
- | It is indeed better typography, | ||
- | and even if the font does not have the dedicated glyphs, | ||
- | the browser is required to synthesize them, | ||
- | so this is look encouraging. | ||
- | However, we cannot switch the default rendering to that. | ||
- | It has issues in terms of compatibility, | ||
- | and more importantly, | ||
- | due the possibility of nested sub/sup. | ||
- | While these are not overly common it does exist, | ||
- | and this style change would induce a rendering with an apparently different meaning. | ||
- | |||
- | Consider the following: | ||
- | <code html> | ||
- | 2< | ||
- | </ | ||
- | |||
- | Even if the typography isn't great, | ||
- | This correctly looks like 2^2^2 = 16 with the legacy styling, | ||
- | but would look like 2^22=16 with the proposed change, | ||
- | which is wrong. | ||
- | |||
- | == More details == | ||
- | |||
- | There were various attempts to define font-variant-position differently to make it handle such situations, | ||
- | but they were rejected for being either too complex, not solving the problem correctly, or both. | ||
- | |||
- | The following code comes reasonably close to giving good typography in the base case, | ||
- | and handling some cases of nesting as well, | ||
- | so web page authors may want to use it if it works for their content, | ||
- | but was not judged sufficiently robust in the general case to be accepted as a new default styling, | ||
- | in part because fonts with inaccurate metrics (which are unfortunately reasonably common) may break it, | ||
- | and in part because it does not handle images and other non textual content in the sub/ | ||
- | |||
- | <code css> | ||
- | sub { font-variant-position: | ||
- | sup { font-variant-position: | ||
- | |||
- | : | ||
- | /* Not using :matches() on the parent in the following 2 rules is intentional, | ||
- | it would shift too much. */ | ||
- | sub sub { vertical-align: | ||
- | sup sup { vertical-align: | ||
- | </ | ||
- | |||
- | === References === | ||
- | * https:// | ||
- | * https:// | ||
- | * https:// | ||
- | |||
- | |||
===== Selectors that Depend on Layout ===== | ===== Selectors that Depend on Layout ===== | ||
Line 307: | Line 237: | ||
=== References === | === References === | ||
+ | * https:// | ||
+ | * https:// | ||
+ | |||
+ | |||
+ | ===== Adding British variants for names ===== | ||
+ | |||
+ | === Question === | ||
+ | |||
+ | Can we add British English variants for names in CSS? | ||
+ | |||
+ | === Answer === | ||
+ | |||
+ | While there are color names using British English spelling like `grey` in addition to the American English versions, those are considered to be legacy. Actually, the [[https:// | ||
+ | Everything new introduced into CSS //only// uses American English spelling. So there' | ||
+ | |||
+ | == more details == | ||
+ | |||
+ | While, from an author' | ||
+ | For authors introducing aliases may cause some confusion and cognitive load, as they may expect a different spelling or even a completely different word. They require precedence and de-duplicating rules in case both are specified in implementations. Also, every new feature would require specification work regarding the alias. And also there would need to be [[https:// | ||
+ | |||
+ | === References === | ||
+ | |||
+ | * https:// | ||
* https:// | * https:// | ||
* https:// | * https:// | ||
Line 343: | Line 296: | ||
* https:// | * https:// | ||
+ | |||
+ | ===== Styling <sup> And <sub> Using font-variant-position ===== | ||
+ | |||
+ | === Question === | ||
+ | HTML currently specifies the following default styles for sup and sub: | ||
+ | |||
+ | <code css> | ||
+ | sub { vertical-align: | ||
+ | sup { vertical-align: | ||
+ | sub, sup { line-height: | ||
+ | </ | ||
+ | |||
+ | This works, but this is not very good typography. The following uses fonts the way they' | ||
+ | |||
+ | <code css> | ||
+ | sub { font-variant-position: | ||
+ | sup { font-variant-position: | ||
+ | </ | ||
+ | |||
+ | === Answer === | ||
+ | It is indeed better typography, | ||
+ | and even if the font does not have the dedicated glyphs, | ||
+ | the browser is required to synthesize them, | ||
+ | so this is look encouraging. | ||
+ | However, we cannot switch the default rendering to that. | ||
+ | It has issues in terms of compatibility, | ||
+ | and more importantly, | ||
+ | due the possibility of nested sub/sup. | ||
+ | While these are not overly common it does exist, | ||
+ | and this style change would induce a rendering with an apparently different meaning. | ||
+ | |||
+ | Consider the following: | ||
+ | <code html> | ||
+ | 2< | ||
+ | </ | ||
+ | |||
+ | Even if the typography isn't great, | ||
+ | This correctly looks like 2^2^2 = 16 with the legacy styling, | ||
+ | but would look like 2^22=16 with the proposed change, | ||
+ | which is wrong. | ||
+ | |||
+ | == More details == | ||
+ | |||
+ | There were various attempts to define font-variant-position differently to make it handle such situations, | ||
+ | but they were rejected for being either too complex, not solving the problem correctly, or both. | ||
+ | |||
+ | The following code comes reasonably close to giving good typography in the base case, | ||
+ | and handling some cases of nesting as well, | ||
+ | so web page authors may want to use it if it works for their content, | ||
+ | but was not judged sufficiently robust in the general case to be accepted as a new default styling, | ||
+ | in part because fonts with inaccurate metrics (which are unfortunately reasonably common) may break it, | ||
+ | and in part because it does not handle images and other non textual content in the sub/ | ||
+ | |||
+ | <code css> | ||
+ | sub { font-variant-position: | ||
+ | sup { font-variant-position: | ||
+ | |||
+ | : | ||
+ | /* Not using :matches() on the parent in the following 2 rules is intentional, | ||
+ | it would shift too much. */ | ||
+ | sub sub { vertical-align: | ||
+ | sup sup { vertical-align: | ||
+ | </ | ||
+ | |||
+ | === References === | ||
+ | * https:// | ||
+ | * https:// | ||
+ | * https:// | ||
+ | |||
+ | |||
+ |