Text Autosizing: Multiply large fonts less, as they are already more legible.
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 23 Aug 2012 16:24:15 +0000 (16:24 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 23 Aug 2012 16:24:15 +0000 (16:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=94227

Patch by John Mellor <johnme@chromium.org> on 2012-08-23
Reviewed by Kenneth Rohde Christiansen.

Source/WebCore:

Rather than uniformly multiplying font sizes by the multiplier (derived
from the width of the block), we should multiply fonts that are already
large less, since they are already more legible hence there is less need
for them to grow.

However it is still important to maintain differentiation between text
that the author specified to be of different sizes.

This algorithm multiplies text by the multiplier up until a predefined
"pleasant" font size; beyond that the computedSize goes up with
specifiedSize but at a gradient of less than 1 in order to gradually
fade out the size increase; finally for very large specifiedSizes the
computedSize will be the same as the specifiedSize.

For further details, including a graph, please see the bug report.

Test: fast/text-autosizing/various-font-sizes.html

* rendering/TextAutosizer.cpp:
(WebCore::TextAutosizer::computeAutosizedFontSize):

    Implements the custom multiplication. See comment for details.

* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::lineHeight):

    Use computeAutosizedFontSize instead of directly multiplying.

(WebCore::RenderStyle::setFontSize):

    Use computeAutosizedFontSize instead of directly multiplying.

LayoutTests:

Added test demonstrating how various font sizes are affected.

* fast/text-autosizing/various-font-sizes-expected.html: Added.
* fast/text-autosizing/various-font-sizes.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@126438 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/text-autosizing/various-font-sizes-expected.html [new file with mode: 0644]
LayoutTests/fast/text-autosizing/various-font-sizes.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/TextAutosizer.cpp
Source/WebCore/rendering/TextAutosizer.h
Source/WebCore/rendering/style/RenderStyle.cpp

index cabaa4a..6dc50b8 100644 (file)
@@ -1,3 +1,15 @@
+2012-08-23  John Mellor  <johnme@chromium.org>
+
+        Text Autosizing: Multiply large fonts less, as they are already more legible.
+        https://bugs.webkit.org/show_bug.cgi?id=94227
+
+        Reviewed by Kenneth Rohde Christiansen.
+
+        Added test demonstrating how various font sizes are affected.
+
+        * fast/text-autosizing/various-font-sizes-expected.html: Added.
+        * fast/text-autosizing/various-font-sizes.html: Added.
+
 2012-08-23  Zan Dobersek  <zandobersek@gmail.com>
 
         Unreviewed GTK gardening.
diff --git a/LayoutTests/fast/text-autosizing/various-font-sizes-expected.html b/LayoutTests/fast/text-autosizing/various-font-sizes-expected.html
new file mode 100644 (file)
index 0000000..872361e
--- /dev/null
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; }
+</style>
+
+</head>
+<body>
+
+<div style="font-size: 20px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</div>
+<div style="font-size: 40px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+</div>
+<div style="font-size: 48px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
+</div>
+<div style="font-size: 56px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/text-autosizing/various-font-sizes.html b/LayoutTests/fast/text-autosizing/various-font-sizes.html
new file mode 100644 (file)
index 0000000..b846927
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta name="viewport" content="width=800">
+<style type="text/css">
+body { width: 800px; margin: 0; }
+</style>
+
+<script type="text/javascript">
+if (window.internals) {
+    window.internals.settings.setTextAutosizingEnabled(true);
+    window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
+} else if (window.console && console.warn) {
+    console.warn("This test depends on the Text Autosizing setting being true, so run it in DumpRenderTree, or manually enable Text Autosizing, and either use a mobile device with 320px device-width (like Nexus S or iPhone), or define HACK_FORCE_TEXT_AUTOSIZING_ON_DESKTOP.");
+}
+</script>
+
+</head>
+<body>
+
+<div style="font-size: 8px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</div>
+<div style="font-size: 16px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+</div>
+<div style="font-size: 32px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
+</div>
+<div style="font-size: 48px">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
+</div>
+
+</body>
+</html>
index 2966949..b52a704 100644 (file)
@@ -1,3 +1,42 @@
+2012-08-23  John Mellor  <johnme@chromium.org>
+
+        Text Autosizing: Multiply large fonts less, as they are already more legible.
+        https://bugs.webkit.org/show_bug.cgi?id=94227
+
+        Reviewed by Kenneth Rohde Christiansen.
+
+        Rather than uniformly multiplying font sizes by the multiplier (derived
+        from the width of the block), we should multiply fonts that are already
+        large less, since they are already more legible hence there is less need
+        for them to grow.
+
+        However it is still important to maintain differentiation between text
+        that the author specified to be of different sizes.
+
+        This algorithm multiplies text by the multiplier up until a predefined
+        "pleasant" font size; beyond that the computedSize goes up with
+        specifiedSize but at a gradient of less than 1 in order to gradually
+        fade out the size increase; finally for very large specifiedSizes the
+        computedSize will be the same as the specifiedSize.
+
+        For further details, including a graph, please see the bug report.
+
+        Test: fast/text-autosizing/various-font-sizes.html
+
+        * rendering/TextAutosizer.cpp:
+        (WebCore::TextAutosizer::computeAutosizedFontSize):
+
+            Implements the custom multiplication. See comment for details.
+
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::lineHeight):
+
+            Use computeAutosizedFontSize instead of directly multiplying.
+
+        (WebCore::RenderStyle::setFontSize):
+
+            Use computeAutosizedFontSize instead of directly multiplying.
+
 2012-08-23  Emil A Eklund  <eae@chromium.org>
 
         Remove dependency on RenderStyle from FractionalLayoutBoxExtent and LayoutBox
index 6122962..4cd735a 100644 (file)
@@ -107,6 +107,34 @@ void TextAutosizer::setMultiplier(RenderObject* renderer, float multiplier)
     renderer->setStyle(newStyle.release());
 }
 
+float TextAutosizer::computeAutosizedFontSize(float specifiedSize, float multiplier)
+{
+    // Somewhat arbitrary "pleasant" font size.
+    const float pleasantSize = 16;
+
+    // Multiply fonts that the page author has specified to be larger than
+    // pleasantSize by less and less, until huge fonts are not increased at all.
+    // For specifiedSize between 0 and pleasantSize we directly apply the
+    // multiplier; hence for specifiedSize == pleasantSize, computedSize will be
+    // multiplier * pleasantSize. For greater specifiedSizes we want to
+    // gradually fade out the multiplier, so for every 1px increase in
+    // specifiedSize beyond pleasantSize we will only increase computedSize
+    // by gradientAfterPleasantSize px until we meet the
+    // computedSize = specifiedSize line, after which we stay on that line (so
+    // then every 1px increase in specifiedSize increases computedSize by 1px).
+    const float gradientAfterPleasantSize = 0.5;
+
+    float computedSize;
+    if (specifiedSize <= pleasantSize)
+        computedSize = multiplier * specifiedSize;
+    else {
+        computedSize = multiplier * pleasantSize + gradientAfterPleasantSize * (specifiedSize - pleasantSize);
+        if (computedSize < specifiedSize)
+            computedSize = specifiedSize;
+    }
+    return computedSize;
+}
+
 bool TextAutosizer::isNotAnAutosizingContainer(const RenderObject* renderer)
 {
     // "Autosizing containers" are the smallest unit for which we can enable/disable
index 3524f5f..c8ade00 100644 (file)
@@ -51,6 +51,8 @@ public:
 
     bool processSubtree(RenderObject* layoutRoot);
 
+    static float computeAutosizedFontSize(float specifiedSize, float multiplier);
+
 private:
     explicit TextAutosizer(Document*);
 
index 37d9890..b1b5faa 100644 (file)
 #include <wtf/StdLibExtras.h>
 #include <algorithm>
 
+#if ENABLE(TEXT_AUTOSIZING)
+#include "TextAutosizer.h"
+#endif
+
 using namespace std;
 
 namespace WebCore {
@@ -1223,7 +1227,7 @@ Length RenderStyle::lineHeight() const
     // too, though this involves messily poking into CalcExpressionLength.
     float multiplier = textAutosizingMultiplier();
     if (multiplier > 1 && lh.isFixed())
-        return Length(lh.value() * multiplier, Fixed);
+        return Length(TextAutosizer::computeAutosizedFontSize(lh.value(), multiplier), Fixed);
 #endif
     return lh;
 }
@@ -1262,8 +1266,7 @@ void RenderStyle::setFontSize(float size)
 #if ENABLE(TEXT_AUTOSIZING)
     float multiplier = textAutosizingMultiplier();
     if (multiplier > 1) {
-        // FIXME: Large font sizes needn't be multiplied as much since they are already more legible.
-        desc.setComputedSize(size * multiplier);
+        desc.setComputedSize(TextAutosizer::computeAutosizedFontSize(size, multiplier));
     }
 #endif