From dca45e1890d81ce07c2a6fafa183ddb3a43ca22f Mon Sep 17 00:00:00 2001 From: Hixie Date: Wed, 24 Jun 2015 11:24:45 -0700 Subject: [PATCH] Expose baseline information in the Sky API. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1208483002. --- engine/core/dom/Element.cpp | 14 ++++++++ engine/core/dom/Element.h | 3 ++ engine/core/dom/Element.idl | 2 ++ examples/raw/baseline.dart | 64 +++++++++++++++++++++++++++++++++++++ 4 files changed, 83 insertions(+) create mode 100644 examples/raw/baseline.dart diff --git a/engine/core/dom/Element.cpp b/engine/core/dom/Element.cpp index c394c97bb13..367843c5dd2 100644 --- a/engine/core/dom/Element.cpp +++ b/engine/core/dom/Element.cpp @@ -972,6 +972,20 @@ void Element::setMaxContentWidth(double width) return box->setMaxPreferredLogicalWidth(width); } +double Element::alphabeticBaseline() const +{ + if (RenderBox* box = renderBox()) + return box->baselinePosition(AlphabeticBaseline, true, HorizontalLine, PositionOfInteriorLineBoxes); + return 0; +} + +double Element::ideographicBaseline() const +{ + if (RenderBox* box = renderBox()) + return box->baselinePosition(IdeographicBaseline, true, HorizontalLine, PositionOfInteriorLineBoxes); + return 0; +} + void Element::setNeedsLayout() { if (RenderBox* box = renderBox()) diff --git a/engine/core/dom/Element.h b/engine/core/dom/Element.h index 5bbc8f04636..505061194da 100644 --- a/engine/core/dom/Element.h +++ b/engine/core/dom/Element.h @@ -222,6 +222,9 @@ public: double maxContentWidth() const; void setMaxContentWidth(double); + double alphabeticBaseline() const; + double ideographicBaseline() const; + void setNeedsLayout(); void layout(); diff --git a/engine/core/dom/Element.idl b/engine/core/dom/Element.idl index 63fcb562ef5..28f2168295d 100644 --- a/engine/core/dom/Element.idl +++ b/engine/core/dom/Element.idl @@ -48,6 +48,8 @@ attribute double height; attribute double minContentWidth; // Intrinsic width if all wrappable points wrap. attribute double maxContentWidth; // Intrinsic width if no wrappable points wrap. + readonly attribute double alphabeticBaseline; // Distance from top to alphabetic baseline of first line + readonly attribute double ideographicBaseline; // Distance from top to ideographic baseline of first line void paint(Canvas canvas); }; diff --git a/examples/raw/baseline.dart b/examples/raw/baseline.dart new file mode 100644 index 00000000000..c51016b72ac --- /dev/null +++ b/examples/raw/baseline.dart @@ -0,0 +1,64 @@ +// Copyright 2015 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'dart:sky' as sky; + +void drawText(sky.Canvas canvas, String lh) { + sky.Paint paint = new sky.Paint(); + + // offset down + canvas.translate(0.0, 100.0); + + // set up the text + sky.Document document = new sky.Document(); + sky.Text arabic = document.createText("مرحبا"); + sky.Text english = document.createText(" Hello"); + sky.Element block = document.createElement('div'); + block.style['display'] = 'paragraph'; + block.style['font-family'] = 'monospace'; + block.style['font-size'] = '50px'; + block.style['line-height'] = lh; + block.style['color'] = '#0000A0'; + block.appendChild(arabic); + block.appendChild(english); + sky.LayoutRoot layoutRoot = new sky.LayoutRoot(); + layoutRoot.rootElement = block; + layoutRoot.maxWidth = sky.view.width - 20.0; // you need to set a width for this to paint + layoutRoot.layout(); + + // draw a line at the text's baseline + sky.Path path = new sky.Path(); + path.moveTo(0.0, 0.0); + path.lineTo(block.maxContentWidth, 0.0); + path.moveTo(0.0, block.alphabeticBaseline); + path.lineTo(block.maxContentWidth, block.alphabeticBaseline); + path.moveTo(0.0, block.height); + path.lineTo(block.maxContentWidth, block.height); + paint.color = const sky.Color(0xFFFF9000); + paint.setStyle(sky.PaintingStyle.stroke); + paint.strokeWidth = 3.0; + canvas.drawPath(path, paint); + + // paint the text + layoutRoot.paint(canvas); +} + +void main() { + // prepare the rendering + sky.PictureRecorder canvas = new sky.PictureRecorder(sky.view.width, sky.view.height); + + // background + sky.Paint paint = new sky.Paint(); + paint.color = const sky.Color(0xFFFFFFFF); + paint.setStyle(sky.PaintingStyle.fill); + canvas.drawRect(new sky.Rect.fromLTRB(0.0, 0.0, sky.view.width, sky.view.height), paint); + + canvas.translate(10.0, 0.0); + drawText(canvas, '1.0'); + drawText(canvas, 'lh'); + + // put it on the screen + sky.view.picture = canvas.endRecording(); + sky.view.scheduleFrame(); +}