Add support for line-height in TextStyle.

Also, some minor cleanup in TextStyle to make it more readable.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1203253002.

examples/widgets/styled_text.dart

@@ -8,7 +8,6 @@ import 'package:sky/rendering/flex.dart';
 import 'package:sky/rendering/sky_binding.dart';
 import 'package:sky/theme/colors.dart';
 import 'package:sky/theme/theme_data.dart';
-import 'package:sky/theme/typography.dart';
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/material.dart';
 import 'package:sky/widgets/scaffold.dart';
@@ -43,7 +42,7 @@ HAL: This mission is too important for me to allow you to jeopardize it.''';
   // [["Dave", "Open the pod bay..."] ...]
   List<List<String>> nameLines;
 
-  final TextStyle daveStyle = new TextStyle(color: Indigo[400]);
+  final TextStyle daveStyle = new TextStyle(color: Indigo[400], height: 1.8);
   final TextStyle halStyle = new TextStyle(color: Red[400], fontFamily: "monospace");
   final TextStyle boldStyle = const TextStyle(fontWeight: bold);
   final TextStyle underlineStyle = const TextStyle(

sdk/lib/painting/text_style.dart

@@ -4,18 +4,7 @@
 
 import 'dart:sky';
 
-enum FontWeight {
-  w100,
-  w200,
-  w300,
-  w400,
-  w500,
-  w600,
-  w700,
-  w800,
-  w900
-}
-
+enum FontWeight { w100, w200, w300, w400, w500, w600, w700, w800, w900 }
 const thin = FontWeight.w100;
 const extraLight = FontWeight.w200;
 const light = FontWeight.w300;
@@ -26,30 +15,14 @@ const bold = FontWeight.w700;
 const extraBold = FontWeight.w800;
 const black = FontWeight.w900;
 
-enum TextAlign {
-  left,
-  right,
-  center
-}
-
-enum TextDecoration {
-  none,
-  underline,
-  overline,
-  lineThrough
-}
+enum TextAlign { left, right, center }
 
+enum TextDecoration { none, underline, overline, lineThrough }
 const underline = const <TextDecoration>[TextDecoration.underline];
 const overline = const <TextDecoration>[TextDecoration.overline];
 const lineThrough = const <TextDecoration>[TextDecoration.lineThrough];
 
-enum TextDecorationStyle {
-  solid,
-  double,
-  dotted,
-  dashed,
-  wavy
-}
+enum TextDecorationStyle { solid, double, dotted, dashed, wavy }
 
 class TextStyle {
   const TextStyle({
@@ -58,6 +31,7 @@ class TextStyle {
     this.fontSize,
     this.fontWeight,
     this.textAlign,
+    this.height,
     this.decoration,
     this.decorationColor,
     this.decorationStyle
@@ -68,6 +42,7 @@ class TextStyle {
   final double fontSize; // in pixels
   final FontWeight fontWeight;
   final TextAlign textAlign;
+  final double height; // multiple of fontSize
   final List<TextDecoration> decoration; // TODO(ianh): Switch this to a Set<> once Dart supports constant Sets
   final Color decorationColor;
   final TextDecorationStyle decorationStyle;
@@ -78,6 +53,7 @@ class TextStyle {
     double fontSize,
     FontWeight fontWeight,
     TextAlign textAlign,
+    double height,
     List<TextDecoration> decoration,
     Color decorationColor,
     TextDecorationStyle decorationStyle
@@ -88,16 +64,13 @@ class TextStyle {
       fontSize: fontSize != null ? fontSize : this.fontSize,
       fontWeight: fontWeight != null ? fontWeight : this.fontWeight,
       textAlign: textAlign != null ? textAlign : this.textAlign,
+      height: height != null ? height : this.height,
       decoration: decoration != null ? decoration : this.decoration,
       decorationColor: decorationColor != null ? decorationColor : this.decorationColor,
       decorationStyle: decorationStyle != null ? decorationStyle : this.decorationStyle
     );
   }
 
-  static String _colorToCSSString(Color color) {
-    return 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 255.0})';
-  }
-
   TextStyle merge(TextStyle other) {
     return copyWith(
       color: other.color,
@@ -105,12 +78,17 @@ class TextStyle {
       fontSize: other.fontSize,
       fontWeight: other.fontWeight,
       textAlign: other.textAlign,
+      height: other.height,
       decoration: other.decoration,
       decorationColor: other.decorationColor,
       decorationStyle: other.decorationStyle
     );
   }
 
+  static String _colorToCSSString(Color color) {
+    return 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 255.0})';
+  }
+
   static String _fontFamilyToCSSString(String fontFamily) {
     // TODO(hansmuller): escape the fontFamily string.
     return fontFamily;
@@ -147,7 +125,7 @@ class TextStyle {
       cssStyle['font-family'] = _fontFamilyToCSSString(fontFamily);
     }
     if (fontSize != null) {
-      cssStyle['font-size'] = "${fontSize}px";
+      cssStyle['font-size'] = '${fontSize}px';
     }
     if (fontWeight != null) {
       cssStyle['font-weight'] = const {
@@ -169,6 +147,9 @@ class TextStyle {
         TextAlign.center: 'center',
       }[textAlign];
     }
+    if (height != null) {
+      cssStyle['line-height'] = '${height}';
+    }
     if (decoration != null) {
       cssStyle['text-decoration'] = _decorationToCSSString(decoration);
       if (decorationColor != null)

tests/examples/styled_text-expected.txt

@@ -13,9 +13,9 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  | drawRRect(Instance of 'RRect', Paint(color:Color(0xfffafafa)))
 2 |  |  | paintChild RenderFlex at Point(8.0, 0.0)
 2 |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 117.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 95.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderPadding at Point(0.0, 149.5)
+2 |  |  |  | paintChild RenderPadding at Point(0.0, 145.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  |  |  |  | paintChild RenderConstrainedBox at Point(64.0, 10.0)
 2 |  |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
@@ -23,9 +23,9 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0x18000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 169.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 165.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderPadding at Point(0.0, 185.5)
+2 |  |  |  | paintChild RenderPadding at Point(0.0, 181.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  |  |  |  | paintChild RenderConstrainedBox at Point(64.0, 10.0)
 2 |  |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
@@ -33,9 +33,9 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0x18000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 205.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 201.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderPadding at Point(0.0, 221.5)
+2 |  |  |  | paintChild RenderPadding at Point(0.0, 226.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  |  |  |  | paintChild RenderConstrainedBox at Point(64.0, 10.0)
 2 |  |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
@@ -43,9 +43,9 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0x18000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 241.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 246.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderPadding at Point(0.0, 257.5)
+2 |  |  |  | paintChild RenderPadding at Point(0.0, 262.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  |  |  |  | paintChild RenderConstrainedBox at Point(64.0, 10.0)
 2 |  |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
@@ -53,9 +53,9 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0x18000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 277.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 282.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderPadding at Point(0.0, 293.5)
+2 |  |  |  | paintChild RenderPadding at Point(0.0, 307.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  |  |  |  | paintChild RenderConstrainedBox at Point(64.0, 10.0)
 2 |  |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
@@ -63,9 +63,9 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0x18000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 313.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 327.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderPadding at Point(0.0, 329.5)
+2 |  |  |  | paintChild RenderPadding at Point(0.0, 343.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  |  |  |  | paintChild RenderConstrainedBox at Point(64.0, 10.0)
 2 |  |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
@@ -73,9 +73,9 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0x18000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 349.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 363.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
-2 |  |  |  | paintChild RenderPadding at Point(0.0, 365.5)
+2 |  |  |  | paintChild RenderPadding at Point(0.0, 388.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  |  |  |  | paintChild RenderConstrainedBox at Point(64.0, 10.0)
 2 |  |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
@@ -83,7 +83,7 @@ PAINT FOR FRAME #2 ----------------------------------------------
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0x18000000)))
 2 |  |  |  |  |  | drawPath(Instance of 'Path', Paint(color:Color(0xff000000)))
-2 |  |  |  | paintChild RenderParagraph at Point(0.0, 385.5)
+2 |  |  |  | paintChild RenderParagraph at Point(0.0, 408.0)
 2 |  |  |  |  | TestRenderCanvas() constructor: 800.0 x 600.0
 2 |  | paintChild RenderDecoratedBox at Point(0.0, 0.0)
 2 |  |  | TestRenderCanvas() constructor: 800.0 x 600.0