[css-size-adjust] Specify text-size-adjust more fully #4435
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <pre class="metadata"> | ||
| Title: CSS Text Size Adjustment Module Level 1 | ||
| Status: ED | ||
| Work Status: Revising | ||
| Shortname: css-size-adjust | ||
|
|
@@ -9,6 +9,7 @@ TR: https://www.w3.org/TR/css-size-adjust/ | |
| ED: https://drafts.csswg.org/css-size-adjust/ | ||
| Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393 | ||
| Editor: Tantek Çelik, Mozilla https://www.mozilla.org/, http://tantek.com/, w3cid 1464 | ||
| Editor: Myles C. Maxfield, Apple Inc., mmaxfield@apple.com, w3cid 77180 | ||
| Abstract: This module contains features of CSS relating to one possible mechanism for adapting pages designed for desktop computer displays for display on smaller screens such as those of mobile phones. This mechanism involves displaying a scaled down display of the Web page and allowing the user to pan and zoom within that display, but within that scaled down display making certain text and similar elements larger than specified by the page author in order to ensure that when a block of wrapped text is zoomed to the width of the device (so it can be read without side-to-side scrolling for each line), the text is large enough to be readable. | ||
| Status Text: <p>The following features are at risk:</p> <ul> <li>the reference to [[!CSS-TEXT-4]]'s 'text-wrap' property</li> </ul> | ||
| </pre> | ||
|
|
@@ -44,6 +45,12 @@ Introduction {#intro} | |
| time, this needs to be done with minimal disruption to the overall | ||
| design of the page. | ||
|
|
||
| Even on a display which is large enough to prevent horizontal scrolling, | ||
| when a user does not zoom into the page, text size adjustment may still | ||
| be desirable. For example, if the viewport rules [[!CSS-DEVICE-ADAPT]] | ||
| describe a default zoom, text may need to be adjusted in order to be | ||
| readable at that default zoom level. | ||
|
Member
There was a problem hiding this comment. Is this specific to zoomed-out effects (zoom < |
||
|
|
||
| While implementations of CSS are not required to use this | ||
| technique, this module describes how implementations of CSS that do | ||
| use this technique must do so. | ||
|
|
@@ -75,20 +82,24 @@ Values {#values} | |
| also accept the <a>CSS-wide keywords</a> keywords as their property value. | ||
| For readability they have not been repeated explicitly. | ||
|
|
||
| Size adjustment {#default-adjustment} | ||
| ===================================== | ||
|
|
||
| This section defines the default size adjustment rules. These rules | ||
| are then referenced by the definition of the 'text-size-adjust' property | ||
| in the following section. | ||
|
|
||
| The result of the adjustment must be a computed value of the 'font-size' | ||
| property and/or the 'line-height' property. | ||
|
|
||
| Note: Therefore, this adjustment is polyfill-able. | ||
|
|
||
|
Comment on lines
-89
to
-91
Member
There was a problem hiding this comment. I think it might still be worth leaving this issue for now. Your edits certainly change the balance on this question, but it might still be worth thinking about further. |
||
| Different User Agents are quite free to make different decisions about viewing conditions, | ||
| which therefore means that the same page may be adjusted differently in different User Agents. | ||
| In general, the User Agent is better able to make these decisions than the page author. | ||
| Page authors are recommended to test a variety of User Agents, devices, and viewing conditions | ||
| when authoring their pages. Text size adjustment can be observed, controlled, and disabled by | ||
| page authors. | ||
|
|
||
| Types of boxes adjusted {#default-adjustment-types} | ||
| --------------------------------------------------- | ||
|
|
@@ -97,54 +108,90 @@ The default size adjustment affects text and form controls, whether | |
| those form controls contain text (e.g., text inputs, selects) or do not | ||
| (e.g., radio buttons, checkboxes). | ||
|
|
||
| Adjustment Conditions {#default-adjustment-conditions} | ||
| ------------------------------------------------------ | ||
|
|
||
| A User Agent may consider any information when determining which elements | ||
| get adjusted. | ||
|
|
||
| Note: In general, User Agents are trying to determine which elements are | ||
| integral to the structure of the page, and thus shouldn't be adjusted, | ||
| and which elements are allowed to flow freely and thus can be adjusted | ||
| without undesirable rendering artifacts. | ||
|
|
||
| Here are some criteria which User Agents may consider when making this | ||
| determination: | ||
|
Comment on lines
+122
to
+123
Member
There was a problem hiding this comment. I think this list is still all worded in the form of things that would or might lead to a decision not to do text size adjustment. So I think it's still worth saying that, so it's clear. (The previous header for the list says that -- and you also said it explicitly inside the first item, but I think it's true for all the items. And if it's not, i.e., if some of the items are the other way around, then I think it's worth restructuring them to match the rest.) |
||
| <ul> | ||
| <li>When the total amount of text in the block formatting context (see | ||
|
Member
There was a problem hiding this comment. technically I think this should probably still be lowercase since they're not complete sentences. (They can still end with a period, since they're followed by complete sentences in many cases.) |
||
| [[!CSS21]]) (excluding text inside descendant block formatting | ||
| contexts) is approximately smaller than the amount that would require | ||
| wrapping to more than one or two lines within that context's | ||
| width. This is a signal that text doesn't need to be autosized.</li> | ||
|
|
||
| <li>When the objects to be adjusted are inside a block-level or | ||
| ''display: inline-block'' element with a 'height' other than | ||
| ''height/auto'' (see [[!CSS21]]). This is a signal that the elements | ||
| are structural to the page content.</li> | ||
|
|
||
| <li>When the objects to be adjusted are inside a | ||
| ''display: inline-block'' element | ||
| with a 'width' other than ''width/auto'' (see | ||
| [[!CSS21]]). This is a signal that the elements | ||
| are structural to the page content.</li> | ||
|
|
||
| <li>When the objects to be adjusted have 'white-space' of ''white-space/pre'' or | ||
| ''white-space/nowrap'' (see [[!CSS21]]) or a 'text-wrap' of ''text-wrap/nowrap'' (see | ||
| [[!CSS-TEXT-4]]).</li> | ||
|
|
||
| <li>Editability of an element, either because it's a form element or because it is ''contenteditable''</li> | ||
|
|
||
| <li>Element contents; empty elements might not benefit from being autosized</li> | ||
|
|
||
| <li>Elements which have compute styles that are fairly unique among the page. These are often structural | ||
|
|
||
| and might provide more broken layout than they benefit from size adjustment</li> | ||
|
|
||
| <li>Elements lay out to be extremely wide compared to the viewport. These would cause horizontal scrolling | ||
|
Member
There was a problem hiding this comment. probably something like "lay out to be" "whose width is"
Member
There was a problem hiding this comment. That said, in Gecko we don't consider this a condition for disabling adjustment -- instead, we cap the width used to min(viewport inline-size, element inline-size) in this code. So it's perhaps worth mentioning that option as well? |
||
| even on a desktop machine</li> | ||
|
|
||
| <li>Elements which are extremely narrow. These are usually structural</li> | ||
|
|
||
| <li>Elements which only contain whitespace</li> | ||
| </ul> | ||
|
|
||
| Calculation of adjustment {#default-adjustment-calculation} | ||
| ----------------------------------------------------------- | ||
|
|
||
| A User Agent may consider any information when determining the magnitude | ||
| of adjustment. | ||
|
|
||
| Note: In general, User Agents are trying to determine how big to make an | ||
| element so that it is readable, and how small it has to be to not overflow | ||
| or get clipped by other nearby elements. | ||
|
|
||
|
Member
There was a problem hiding this comment. I think it's probably worth retaining this text as an example, and perhaps adding another example if you have one. It may also be worth adding the "differentiations between font sizes" point to the list of criteria. |
||
| Here are some criteria which User Agents may consider when making this | ||
| determination: | ||
| <ul> | ||
| <li>Preferences of the renderer or the renderer's user indicating the desired | ||
| <dfn>minimum readable text size</dfn></li> | ||
|
|
||
| <li>Preferences of the page author indicating the author's desired font size, | ||
| as specified by the 'font-size' property</li> | ||
|
|
||
| <li>Viewport rules and default zoom level [[!CSS-DEVICE-ADAPT]]</li> | ||
|
|
||
| <li>Any style information, such as the specified or computed value of the | ||
| 'line-height' property</li> | ||
|
|
||
| <li>Layout size compared to viewport size</li> | ||
|
|
||
| <li>Layout information and styles of other, similar elements on the page</li> | ||
|
|
||
| <li>A maximum adjustment that no element should surpass</li> | ||
|
|
||
| <li>Device size and weight; whether or not devices are usually held or placed on a desk</li> | ||
|
|
||
| <li>Usual reading distance to device</li> | ||
| </ul> | ||
|
|
||
| Size adjustment control: the 'text-size-adjust' property {#adjustment-control} | ||
| ============================================================================== | ||
|
|
@@ -163,21 +210,52 @@ Size adjustment control: the 'text-size-adjust' property {#adjustment-control} | |
|
|
||
| <dl dfn-for="text-size-adjust" dfn-type="value"> | ||
| <dt><dfn>auto</dfn></dt> | ||
| <dd>Renderers must use the <a href="#default-adjustment">default size adjustment</a> that is best tailored to the individual user's and device's viewing conditions.</dd> | ||
| <p class="note">Note: On most desktop machines, the best adjustment is no adjustment.</p></dd> | ||
| <dt><dfn>none</dfn></dt> | ||
| <dd>Renderers must not adjust sizes.</dd> | ||
| <dt><dfn><percentage></dfn></dt> | ||
| <dd>Provided as a hint to the User Agent about a suggested adjustment amount. User agents may consider this percentage value when computing an adjusted text size.</dd> | ||
|
Member
There was a problem hiding this comment. I don't think this is a sufficient definition. It needs to say what the percentage means (which the old text did -- although it's possible it was wrong), even if it then says that UAs don't have to honor it. It would be better to say what the inputs into the decision of whether to honor it are. |
||
| <p class="note">Note: Therefore, if a User Agent naively applies the percentage to the specified text size, 'text-size-adjust: 100%;' is equivalent to 'text-size-adjust: none;'.</p></dd> | ||
| </dl> | ||
|
|
||
| Determining and Reacting to Adjustment Effects {#adjustment-reaction} | ||
| ===================================================================== | ||
|
|
||
| This section is non-normative | ||
|
Member
There was a problem hiding this comment. Use |
||
|
|
||
| Different User Agents are quite free to make different decisions about viewing conditions, | ||
| which therefore means that the same page may be adjusted differently in different User Agents. | ||
| In general, the User Agent is better able to make these decisions than the page author; however, | ||
| there are some situations where the page author needs to at least know how the User Agent | ||
| has adjusted the page. Because the result of the adjustment must be a new computed value of the | ||
| 'font-size' or 'line-height' properties, the result of the adjustment may be discovered in | ||
| JavaScript by using the 'getComputedStyle()' function. | ||
|
|
||
| <div class="example"> | ||
| The 'getComputedStyle()' function can be used to determine the effects of the adjustment. | ||
| <pre> | ||
| var target = document.getElementById("target"); | ||
| var adjustedFontSize = window.getComputedStyle(target).getPropertyValue("font-size"); | ||
| </pre> | ||
| </div> | ||
|
|
||
| <div class="example"> | ||
| Not only can a page determine the User Agent's adjustment, but it can react to such adjustment. | ||
| <pre> | ||
| var target = document.getElementById("target"); | ||
| var adjustedFontSize = window.getComputedStyle(target).getPropertyValue("font-size"); | ||
| if (canComputeOtherFontSize(target, adjustedFontSize)) { | ||
| var otherFontSize = computeOtherFontSize(target); | ||
| target.style.setProperty("text-size-adjust", "none"); | ||
| target.style.setProperty("font-size", otherFontSize); | ||
| } | ||
| </pre> | ||
| </div> | ||
|
|
||
| Acknowledgments {#acknowledgments} | ||
| ================================== | ||
|
|
||
| The editors would like to thank: | ||
| Wenson Hsieh. | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you're better off without this comma, i.e., "a display which is large enough to prevent horizontal scrolling when the user does not zoom into the page".
I also don't think "prevent" is quite the right word here. Maybe "to prevent" -> "not to require", if that's what's intended? If it's not what's intended, then maybe something else?