Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Commit a548d39

Browse files
collinjacksoncollinjackson
committed
Merge pull request #123 from collinjackson/baseline6
Support for non-alphabetic baselines
2 parents 246122f + 04ecd8a commit a548d39

File tree

7 files changed

+56
-26
lines changed

7 files changed

+56
-26
lines changed

‎sky/sdk/example/rendering/align_items.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ void main() {
2020
TextStyle style = const TextStyle(color: const Color(0xFF000000));
2121
RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${alignItems}")]));
2222
table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
23-
var row = new RenderFlex(alignItems: alignItems);
23+
var row = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic);
2424

2525
style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
2626
row.add(new RenderDecoratedBox(
@@ -32,7 +32,7 @@ void main() {
3232
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
3333
child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
3434
));
35-
var subrow = new RenderFlex(alignItems: alignItems);
35+
var subrow = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic);
3636
style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
3737
subrow.add(new RenderDecoratedBox(
3838
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),

‎sky/sdk/example/stocks/lib/stock_row.dart

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:sky/painting/text_style.dart';
66
import 'package:sky/rendering/box.dart';
77
import 'package:sky/widgets/ink_well.dart';
88
import 'package:sky/widgets/basic.dart';
9+
import 'package:sky/widgets/default_text_style.dart';
910
import 'package:sky/widgets/theme.dart';
1011

1112
import 'stock_arrow.dart';
@@ -60,7 +61,11 @@ class StockRow extends Component {
6061
margin: const EdgeDims.only(right: 5.0)
6162
),
6263
new Flexible(
63-
child: new Flex(children, alignItems: FlexAlignItems.baseline)
64+
child: new Flex(
65+
children,
66+
alignItems: FlexAlignItems.baseline,
67+
textBaseline: DefaultTextStyle.of(this).textBaseline
68+
)
6469
)
6570
])
6671
)

‎sky/sdk/lib/painting/text_style.dart

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const bold = FontWeight.w700;
1010

1111
enum TextAlign { left, right, center }
1212

13+
enum TextBaseline { alphabetic, ideographic }
14+
1315
enum TextDecoration { none, underline, overline, lineThrough }
1416
const underline = const <TextDecoration>[TextDecoration.underline];
1517
const overline = const <TextDecoration>[TextDecoration.overline];
@@ -24,6 +26,7 @@ class TextStyle {
2426
this.fontSize,
2527
this.fontWeight,
2628
this.textAlign,
29+
this.textBaseline,
2730
this.height,
2831
this.decoration,
2932
this.decorationColor,
@@ -35,6 +38,7 @@ class TextStyle {
3538
final double fontSize; // in pixels
3639
final FontWeight fontWeight;
3740
final TextAlign textAlign;
41+
final TextBaseline textBaseline;
3842
final double height; // multiple of fontSize
3943
final List<TextDecoration> decoration; // TODO(ianh): Switch this to a Set<> once Dart supports constant Sets
4044
final Color decorationColor;
@@ -46,6 +50,7 @@ class TextStyle {
4650
double fontSize,
4751
FontWeight fontWeight,
4852
TextAlign textAlign,
53+
TextBaseline textBaseline,
4954
double height,
5055
List<TextDecoration> decoration,
5156
Color decorationColor,
@@ -57,6 +62,7 @@ class TextStyle {
5762
fontSize: fontSize != null ? fontSize : this.fontSize,
5863
fontWeight: fontWeight != null ? fontWeight : this.fontWeight,
5964
textAlign: textAlign != null ? textAlign : this.textAlign,
65+
textBaseline: textBaseline != null ? textBaseline : this.textBaseline,
6066
height: height != null ? height : this.height,
6167
decoration: decoration != null ? decoration : this.decoration,
6268
decorationColor: decorationColor != null ? decorationColor : this.decorationColor,
@@ -71,6 +77,7 @@ class TextStyle {
7177
fontSize: other.fontSize,
7278
fontWeight: other.fontWeight,
7379
textAlign: other.textAlign,
80+
textBaseline: other.textBaseline,
7481
height: other.height,
7582
decoration: other.decoration,
7683
decorationColor: other.decorationColor,
@@ -157,10 +164,11 @@ class TextStyle {
157164
return true;
158165
return other is TextStyle &&
159166
color == other.color &&
160-
fontFamily == other.fontFamily &&
167+
fontFamily == other.fontFamily &&
161168
fontSize == other.fontSize &&
162169
fontWeight == other.fontWeight &&
163-
textAlign == other.textAlign &&
170+
textAlign == other.textAlign &&
171+
textBaseline == other.textBaseline &&
164172
decoration == other.decoration &&
165173
decorationColor == other.decorationColor &&
166174
decorationStyle == other.decorationStyle;
@@ -174,6 +182,7 @@ class TextStyle {
174182
value = 37 * value + fontSize.hashCode;
175183
value = 37 * value + fontWeight.hashCode;
176184
value = 37 * value + textAlign.hashCode;
185+
value = 37 * value + textBaseline.hashCode;
177186
value = 37 * value + decoration.hashCode;
178187
value = 37 * value + decorationColor.hashCode;
179188
value = 37 * value + decorationStyle.hashCode;
@@ -193,6 +202,8 @@ class TextStyle {
193202
result.add('${prefix}fontWeight: $fontWeight');
194203
if (textAlign != null)
195204
result.add('${prefix}textAlign: $textAlign');
205+
if (textBaseline != null)
206+
result.add('${prefix}textBaseline: $textBaseline');
196207
if (decoration != null)
197208
result.add('${prefix}decoration: $decoration');
198209
if (decorationColor != null)

‎sky/sdk/lib/rendering/box.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import 'dart:sky' as sky;
77

88
import 'package:sky/base/debug.dart';
99
import 'package:sky/painting/box_painter.dart';
10+
import 'package:sky/painting/text_style.dart';
1011
import 'package:sky/rendering/object.dart';
1112
import 'package:vector_math/vector_math.dart';
1213

1314
export 'package:sky/painting/box_painter.dart';
15+
export 'package:sky/painting/text_style.dart' show TextBaseline;
1416

1517
// GENERIC BOX RENDERING
1618
// Anything that has a concept of x, y, width, height is going to derive from this
@@ -253,8 +255,6 @@ class BoxParentData extends ParentData {
253255
String toString() => 'position=$position';
254256
}
255257

256-
enum TextBaseline { alphabetic, ideographic }
257-
258258
abstract class RenderBox extends RenderObject {
259259

260260
void setupParentData(RenderObject child) {

‎sky/sdk/lib/rendering/flex.dart

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
4747
List<RenderBox> children,
4848
FlexDirection direction: FlexDirection.horizontal,
4949
FlexJustifyContent justifyContent: FlexJustifyContent.start,
50-
FlexAlignItems alignItems: FlexAlignItems.center
50+
FlexAlignItems alignItems: FlexAlignItems.center,
51+
TextBaseline textBaseline
5152
}) : _direction = direction,
5253
_justifyContent = justifyContent,
53-
_alignItems = alignItems {
54+
_alignItems = alignItems,
55+
_textBaseline = textBaseline {
5456
addAll(children);
5557
}
5658

@@ -81,6 +83,15 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
8183
}
8284
}
8385

86+
TextBaseline _textBaseline;
87+
TextBaseline get textBaseline => _textBaseline;
88+
void set textBaseline (TextBaseline value) {
89+
if (_textBaseline != value) {
90+
_textBaseline = value;
91+
markNeedsLayout();
92+
}
93+
}
94+
8495
bool _overflowOccurredDuringLayout = false;
8596

8697
void setupParentData(RenderBox child) {
@@ -342,8 +353,8 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
342353
crossSize = math.max(crossSize, _getCrossSize(child));
343354
}
344355
if (alignItems == FlexAlignItems.baseline) {
345-
// TODO(jackson): Support for non-alphabetic baselines
346-
double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
356+
assert(textBaseline != null);
357+
double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
347358
if (distance != null)
348359
maxBaselineDistance = math.max(maxBaselineDistance, distance);
349360
}
@@ -412,10 +423,9 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
412423
break;
413424
case FlexAlignItems.baseline:
414425
childCrossPosition = 0.0;
415-
// TODO(jackson): Support for vertical baselines
416426
if (_direction == FlexDirection.horizontal) {
417-
// TODO(jackson): Support for non-alphabetic baselines
418-
double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
427+
assert(textBaseline != null);
428+
double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
419429
if (distance != null)
420430
childCrossPosition = maxBaselineDistance - distance;
421431
}

‎sky/sdk/lib/theme/typography.dart

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,21 @@ import 'dart:sky';
99
import 'package:sky/painting/text_style.dart';
1010

1111
// TODO(eseidel): Font weights are supposed to be language relative!
12+
// TODO(jackson): Baseline should be language relative!
1213
// These values are for English-like text.
1314
class TextTheme {
1415
TextTheme._(Color color54, Color color87)
15-
: display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54),
16-
display3 = new TextStyle(fontSize: 56.0, fontWeight: FontWeight.w400, color: color54),
17-
display2 = new TextStyle(fontSize: 45.0, fontWeight: FontWeight.w400, color: color54, height: 48.0 / 45.0),
18-
display1 = new TextStyle(fontSize: 34.0, fontWeight: FontWeight.w400, color: color54, height: 40.0 / 34.0),
19-
headline = new TextStyle(fontSize: 24.0, fontWeight: FontWeight.w400, color: color87, height: 32.0 / 24.0),
20-
title = new TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500, color: color87, height: 28.0 / 20.0),
21-
subhead = new TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400, color: color87, height: 24.0 / 16.0),
22-
body2 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87, height: 24.0 / 14.0),
23-
body1 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400, color: color87, height: 20.0 / 14.0),
24-
caption = new TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: color54),
25-
button = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87);
16+
: display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54, textBaseline: TextBaseline.alphabetic),
17+
display3 = new TextStyle(fontSize: 56.0, fontWeight: FontWeight.w400, color: color54, textBaseline: TextBaseline.alphabetic),
18+
display2 = new TextStyle(fontSize: 45.0, fontWeight: FontWeight.w400, color: color54, height: 48.0 / 45.0, textBaseline: TextBaseline.alphabetic),
19+
display1 = new TextStyle(fontSize: 34.0, fontWeight: FontWeight.w400, color: color54, height: 40.0 / 34.0, textBaseline: TextBaseline.alphabetic),
20+
headline = new TextStyle(fontSize: 24.0, fontWeight: FontWeight.w400, color: color87, height: 32.0 / 24.0, textBaseline: TextBaseline.alphabetic),
21+
title = new TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500, color: color87, height: 28.0 / 20.0, textBaseline: TextBaseline.alphabetic),
22+
subhead = new TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400, color: color87, height: 24.0 / 16.0, textBaseline: TextBaseline.alphabetic),
23+
body2 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87, height: 24.0 / 14.0, textBaseline: TextBaseline.alphabetic),
24+
body1 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400, color: color87, height: 20.0 / 14.0, textBaseline: TextBaseline.alphabetic),
25+
caption = new TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: color54, textBaseline: TextBaseline.alphabetic),
26+
button = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: color87, textBaseline: TextBaseline.alphabetic);
2627

2728
final TextStyle display4;
2829
final TextStyle display3;

‎sky/sdk/lib/widgets/basic.dart

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,12 +401,14 @@ class Flex extends MultiChildRenderObjectWrapper {
401401
String key,
402402
this.direction: FlexDirection.horizontal,
403403
this.justifyContent: FlexJustifyContent.start,
404-
this.alignItems: FlexAlignItems.center
404+
this.alignItems: FlexAlignItems.center,
405+
this.textBaseline
405406
}) : super(key: key, children: children);
406407

407408
final FlexDirection direction;
408409
final FlexJustifyContent justifyContent;
409410
final FlexAlignItems alignItems;
411+
final TextBaseline textBaseline;
410412

411413
RenderFlex createNode() => new RenderFlex(direction: this.direction);
412414
RenderFlex get root => super.root;
@@ -416,6 +418,7 @@ class Flex extends MultiChildRenderObjectWrapper {
416418
root.direction = direction;
417419
root.justifyContent = justifyContent;
418420
root.alignItems = alignItems;
421+
root.textBaseline = textBaseline;
419422
}
420423

421424
}

0 commit comments

Comments
 (0)