Initial ruby changes to Style.dart

Sub6Resources · Sub6Resources · commit 281e8dbab601 · 2019-12-16T13:01:25.000-07:00
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -40,7 +40,16 @@ const htmlData = """
           漢<rt>かん</rt>
           字<rt>じ</rt>
         </ruby>
-        &nbsp;is Japanese Kanji
+        &nbsp;is Japanese Kanji.
+        <br />
+        <ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby> is Traditional Chinese.
+        <br />
+        <ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby> is Simplified Chinese
+        <br />
+        <ruby>
+          <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
+          <rt>An abstract language for describing documents and applications
+        </ruby>
       </p>
       Solve for <var>x<sub>n</sub></var>: log<sub>2</sub>(<var>x</var><sup>2</sup>+<var>n</var>) = 9<sup>3</sup>
       <p>One of the most common equations in all of physics is <var>E</var>=<var>m</var><var>c</var><sup>2</sup>.<p>
diff --git a/lib/src/replaced_element.dart b/lib/src/replaced_element.dart
@@ -251,19 +251,131 @@ class EmptyContentElement extends ReplacedElement {
   Widget toWidget(_) => null;
 }
 
+//TODO(Sub6Resources): <ruby> formatting should adhere to
+// the most recent CSS WD specification: https://drafts.csswg.org/css-ruby/
 class RubyElement extends ReplacedElement {
   dom.Element element;
 
   RubyElement({@required this.element, String name = "ruby"})
       : super(name: name, alignment: PlaceholderAlignment.middle);
 
+  static RubyElementInfo parseRuby(dom.Node root) {
+    final RubyElementInfo info = RubyElementInfo();
+    if(root.parent.localName != 'ruby') {
+      dom.Node currentParent = root;
+      int index = 0;
+      int startIndex;
+      int savedStartIndex;
+      int lookaheadIndex;
+
+      BaseTextSegment currentBaseText;
+
+      //Start mode
+      if(index >= currentParent.children.length) {
+        //Jump to end mode
+
+      }
+
+      if(currentParent.children[index].localName == 'rt' || currentParent.children[index].localName == 'rp') {
+        //Jump to annotation mode
+
+      }
+
+      startIndex = index;
+
+      //Base mode
+      if(currentParent.children[index].localName == 'ruby' && currentParent == root) {
+        currentParent = currentParent.children[index];
+        index = 0;
+        savedStartIndex = startIndex;
+        startIndex = null;
+        //Jump to start mode
+
+      }
+
+      if(currentParent.children[index].localName == 'rt' || currentParent.children[index].localName == 'rp') {
+        BaseTextSegment newBaseTextSegment = BaseTextSegment();
+        newBaseTextSegment.baseText = List<dom.Node>();
+        for(int i = startIndex; i < index; i++) {
+          newBaseTextSegment.baseText.add(currentParent.children[i]);
+        }
+        currentBaseText = newBaseTextSegment;
+        info.baseTextSegments.add(newBaseTextSegment);
+        //Jump to annotation mode
+      }
+
+      index++;
+
+      //Base mode post-increment
+      if(index >= currentParent.children.length) {
+        //Jump to end mode
+      }
+
+      // Jump back to base mode
+
+      //Annotation mode
+      if(currentParent.children[index].localName == 'rt') {
+        final rt = currentParent.children[index];
+        AnnotationSegment annotationSegment = AnnotationSegment();
+        annotationSegment.annotation = [rt];
+        if(currentBaseText != null) {
+          annotationSegment.segment = currentBaseText;
+        }
+        info.annotationSegments.add(annotationSegment);
+        //Jump to annotation mode increment
+      }
+
+      if(currentParent.children[index].localName == 'rp') {
+        //Jump to annotation mode increment
+      }
+
+      if(currentParent.children[index] is! dom.Text || (currentParent.children[index] is dom.Text && currentParent.children[index].text.trim().isNotEmpty)) {
+        //Jump to base mode
+      }
+
+      //Annotation mode increment
+      lookaheadIndex = index + 1;
+
+      //Annotation mode white-space skipper
+      if(lookaheadIndex == currentParent.children.length) {
+        //Jump to end mode
+      }
+
+      if(currentParent.children[lookaheadIndex].localName == 'rt' || currentParent.children[lookaheadIndex].localName == 'rp') {
+        index = lookaheadIndex;
+        //Jump to annotation mode
+      }
+
+      if(currentParent.children[lookaheadIndex] is! dom.Text || (currentParent.children[lookaheadIndex] is dom.Text && currentParent.children[lookaheadIndex].text.trim().isNotEmpty)) {
+        //Jump to base mode (without incrementing index)
+      }
+      lookaheadIndex++;
+
+      //Jump to annotation mode white space skipper
+
+      //End mode
+      if(currentParent != root) {
+        index = root.children.indexOf(currentParent);
+        currentParent = root;
+        index++;
+        startIndex = savedStartIndex;
+        savedStartIndex = null;
+        //Jump to base mode post increment.
+      }
+
+    }
+
+    //End
+    return info;
+  }
+
   @override
   Widget toWidget(RenderContext context) {
-    dom.Node textNode = null;
+    dom.Node textNode;
     List<Widget> widgets = List<Widget>();
     //TODO calculate based off of parent font size.
-    final rubySize = max(9.0, context.style.fontSize.size / 2);
-    final rubyYPos = rubySize + 2;
+    final rubySize = context.style.fontSize.size / 2;
+    final rubyYPos = rubySize + 4;
     element.nodes.forEach((c) {
       if (c.nodeType == dom.Node.TEXT_NODE) {
         textNode = c;
@@ -301,6 +413,26 @@ class RubyElement extends ReplacedElement {
   }
 }
 
+class RubyElementInfo {
+  List<BaseTextSegment> baseTextSegments;
+  List<AnnotationSegment> annotationSegments;
+
+  RubyElementInfo() {
+    baseTextSegments = List<BaseTextSegment>();
+    annotationSegments = List<AnnotationSegment>();
+  }
+}
+
+class BaseTextSegment {
+  List<BaseTextSegment> subSegments;
+  List<dom.Node> baseText;
+}
+
+class AnnotationSegment {
+  List<dom.Node> annotation;
+  BaseTextSegment segment;
+}
+
 ReplacedElement parseReplacedElement(dom.Element element) {
   switch (element.localName) {
     case "audio":
diff --git a/lib/style.dart b/lib/style.dart
@@ -36,6 +36,24 @@ class Style {
   ///CSS attribute "`margin`"
   EdgeInsets margin;
 
+  /// CSS attribute "`ruby-align`"
+  ///
+  /// inherited: yes,
+  /// default: [RubyAlign.CENTER] (SPACE_AROUND currently unsupported),
+  RubyAlign rubyAlign;
+
+  /// CSS attribute "`ruby-merge`"
+  ///
+  /// inherited: yes,
+  /// default: [RubyMerge.SEPARATE],
+  RubyMerge rubyMerge;
+
+  /// CSS attribute "`ruby-position`"
+  ///
+  /// inherited: yes,
+  /// default: [RubyPosition.OVER],
+  RubyPosition rubyPosition;
+
   ///CSS attribute "`text-decoration`" -
   TextDecoration textDecoration;
 
@@ -71,6 +89,9 @@ class Style {
     this.listStyleType,
     this.padding,
     this.margin,
+    this.rubyAlign,
+    this.rubyMerge,
+    this.rubyPosition,
     this.textDecoration,
     this.textDecorationStyle,
     this.verticalAlign,
@@ -120,6 +141,9 @@ class Style {
       //TODO merge EdgeInsets
       margin: other.margin,
       //TODO merge EdgeInsets
+      rubyAlign: other.rubyAlign,
+      rubyMerge: other.rubyMerge,
+      rubyPosition: other.rubyPosition,
       textDecoration: other.textDecoration,
       textDecorationStyle: other.textDecorationStyle,
       verticalAlign: other.verticalAlign,
@@ -145,6 +169,9 @@ class Style {
       fontStyle: child.fontStyle ?? fontStyle,
       fontWeight: child.fontWeight ?? fontWeight,
       listStyleType: child.listStyleType ?? listStyleType,
+      rubyAlign: child.rubyAlign ?? rubyAlign,
+      rubyMerge: child.rubyMerge ?? rubyMerge,
+      rubyPosition: child.rubyPosition ?? rubyPosition,
       whiteSpace: child.whiteSpace ?? whiteSpace,
     );
   }
@@ -161,6 +188,9 @@ class Style {
     ListStyleType listStyleType,
     EdgeInsets padding,
     EdgeInsets margin,
+    RubyAlign rubyAlign,
+    RubyMerge rubyMerge,
+    RubyPosition rubyPosition,
     TextDecoration textDecoration,
     TextDecorationStyle textDecorationStyle,
     VerticalAlign verticalAlign,
@@ -187,6 +217,9 @@ class Style {
       listStyleType: listStyleType ?? this.listStyleType,
       padding: padding ?? this.padding,
       margin: margin ?? this.margin,
+      rubyAlign: rubyAlign ?? this.rubyAlign,
+      rubyMerge: rubyMerge ?? this.rubyMerge,
+      rubyPosition: rubyPosition ?? this.rubyPosition,
       textDecoration: textDecoration ?? this.textDecoration,
       textDecorationStyle: textDecorationStyle ?? this.textDecorationStyle,
       verticalAlign: verticalAlign ?? this.verticalAlign,
@@ -218,6 +251,11 @@ enum Display {
   INLINE,
   INLINE_BLOCK,
   LIST_ITEM,
+  RUBY,
+  RUBY_BASE,
+  RUBY_TEXT,
+  RUBY_BASE_CONTAINER,
+  RUBY_TEXT_CONTAINER,
 }
 
 class FontSize {
@@ -251,6 +289,25 @@ enum ListStyleType {
   DECIMAL,
 }
 
+enum RubyAlign {
+  START,
+  CENTER,
+  //UNSUPPORTED: SPACE_BETWEEN,
+  //UNSUPPORTED: SPACE_AROUND,
+}
+
+enum RubyMerge {
+  SEPARATE,
+  COLLAPSE,
+  //UNSUPPORTED: AUTO,
+}
+
+enum RubyPosition {
+  OVER,
+  UNDER,
+  INTER_CHARACTER,
+}
+
 enum VerticalAlign {
   BASELINE,
   SUB,
