Merge pull request #197 from Sub6Resources/sub-sup

Add support for both sub and sup as well as add the css vertical-align property

README.md

@@ -2,6 +2,7 @@
 [![pub package](https://img.shields.io/pub/v/flutter_html.svg)](https://pub.dev/packages/flutter_html)
 [![codecov](https://codecov.io/gh/Sub6Resources/flutter_html/branch/master/graph/badge.svg)](https://codecov.io/gh/Sub6Resources/flutter_html)
 [![CircleCI](https://circleci.com/gh/Sub6Resources/flutter_html.svg?style=svg)](https://circleci.com/gh/Sub6Resources/flutter_html)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/Sub6Resources/flutter_html/blob/master/LICENSE)
 
 A Flutter widget for rendering html and css as Flutter widgets.
 

example/lib/main.dart

@@ -29,25 +29,21 @@ class MyHomePage extends StatefulWidget {
 }
 
 const htmlData = """
-<p id='whitespace'>
-      These two lines should have an identical length:<br /><br />
-      
-            The     quick   <b> brown </b><u><i> fox </i></u> jumped over   the 
-             lazy  
-             
-             
-             
-             
-             dog.<br />
-            The quick brown fox jumped over the lazy dog.
-      </p>
+<h1>Header 1</h1>
+<h2>Header 2</h2>
+<h3>Header 3</h3>
+<h4>Header 4</h4>
+<h5>Header 5</h5>
+<h6>Header 6</h6>
       <p>
         <ruby>
           漢<rt>かん</rt>
           字<rt>じ</rt>
         </ruby>
         &nbsp;is Japanese Kanji
       </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>
       <table>
       <colgroup>
         <col width="50%" />
@@ -124,35 +120,34 @@ class _MyHomePageState extends State<MyHomePage> {
 //              backgroundColor: Colors.red,
 //                fontSize: 20,
 //                margin: const EdgeInsets.only(top: 32),
-                    ),
+                        ),
                     "h1, h3, h5": Style(
 //                backgroundColor: Colors.deepPurple,
 //                alignment: Alignment.center,
-                    ),
+                        ),
                     "#whitespace": Style(
-                      backgroundColor: Colors.purple,
-                    ),
-                    "table": Style(
-                      backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee)
-                    ),
-                    "tr": Style(
-                      border: Border(bottom: BorderSide(color: Colors.grey))
+                      backgroundColor: Colors.deepPurple,
                     ),
+                    "table": Style(backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee)),
+                    "tr": Style(border: Border(bottom: BorderSide(color: Colors.grey))),
                     "th": Style(
                       padding: EdgeInsets.all(6),
-                      backgroundColor: Colors.grey
+                      backgroundColor: Colors.grey,
                     ),
                     "td": Style(
                       padding: EdgeInsets.all(6),
-                      backgroundColor: Colors.transparent
-                    )
+                      backgroundColor: Colors.transparent,
+                    ),
+                    "var": Style(fontFamily: 'serif'),
                   },
                   customRender: {
                     "flutter": (RenderContext context, Widget child, attributes) {
                       return FlutterLogo(
-                        style: (attributes['horizontal'] != null)? FlutterLogoStyle.horizontal: FlutterLogoStyle.markOnly,
+                        style: (attributes['horizontal'] != null)
+                            ? FlutterLogoStyle.horizontal
+                            : FlutterLogoStyle.markOnly,
                         textColor: context.style.color,
-                        size: context.style.fontSize * 5,
+                        size: context.style.fontSize.size * 5,
                       );
                     }
                   },
@@ -166,12 +161,14 @@ class _MyHomePageState extends State<MyHomePage> {
               ),
             ),
             Expanded(
-                child: SingleChildScrollView(
-                  child: Text(
-                    HtmlParser.cleanTree(HtmlParser.applyCSS(HtmlParser.lexDomTree(HtmlParser.parseHTML(htmlData), [], []), null)).toString(),
-                    style: TextStyle(fontFamily: 'monospace'),
-                  ),
+              child: SingleChildScrollView(
+                child: Text(
+                  HtmlParser.cleanTree(HtmlParser.applyCSS(
+                          HtmlParser.lexDomTree(HtmlParser.parseHTML(htmlData), [], []), null))
+                      .toString(),
+                  style: TextStyle(fontFamily: 'monospace'),
                 ),
+              ),
             )
           ],
         ),

lib/html_parser.dart

@@ -177,6 +177,7 @@ class HtmlParser extends StatelessWidget {
     tree = _processListCharacters(tree);
     tree = _processBeforesAndAfters(tree);
     tree = _collapseMargins(tree);
+    tree = _processFontSize(tree);
     return tree;
   }
 
@@ -186,7 +187,7 @@ class HtmlParser extends StatelessWidget {
     // inherit the correct style
     RenderContext newContext = RenderContext(
       parser: this,
-      style: context.style.merge(tree.style),
+      style: context.style.copyOnlyInherited(tree.style),
     );
 
     if (customRender?.containsKey(tree.name) ?? false) {
@@ -254,7 +255,7 @@ class HtmlParser extends StatelessWidget {
     } else if (tree is InteractableElement) {
       return WidgetSpan(
         child: GestureDetector(
-          onTap: () => onLinkTap(tree.href),
+          onTap: () => onLinkTap?.call(tree.href),
           child: RichText(
             text: TextSpan(
               style: newContext.style.generateTextStyle(),
@@ -267,6 +268,30 @@ class HtmlParser extends StatelessWidget {
       return WidgetSpan(
         child: tree.toWidget(context),
       );
+    } else if (tree.style.verticalAlign != null && tree.style.verticalAlign != VerticalAlign.BASELINE) {
+      double verticalOffset;
+      switch(tree.style.verticalAlign) {
+        case VerticalAlign.SUB:
+          verticalOffset = tree.style.fontSize.size / 2.5;
+          break;
+        case VerticalAlign.SUPER:
+          verticalOffset = tree.style.fontSize.size / -2.5;
+          break;
+        default:
+          break;
+      }
+      //Requires special layout features not available in the TextStyle API.
+      return WidgetSpan(
+        child: Transform.translate(
+          offset: Offset(0, verticalOffset),
+          child: RichText(
+            text: TextSpan(
+              style: newContext.style.generateTextStyle(),
+              children: tree.children.map((tree) => parseTree(newContext, tree)).toList() ?? [],
+            ),
+          ),
+        ),
+      );
     } else {
       ///[tree] is an inline element.
       return TextSpan(
@@ -514,6 +539,19 @@ class HtmlParser extends StatelessWidget {
 
     return tree;
   }
+
+  static StyledElement _processFontSize(StyledElement tree) {
+    double parentFontSize = tree.style?.fontSize?.size ?? FontSize.medium.size;
+
+    tree.children?.forEach((child) {
+      if ((child.style.fontSize?.size ?? parentFontSize) < 0) {
+        child.style.fontSize = FontSize(parentFontSize * -child.style.fontSize.size);
+      }
+
+      _processFontSize(child);
+    });
+    return tree;
+  }
 }
 
 ///TODO document better

lib/src/replaced_element.dart

@@ -250,7 +250,8 @@ class RubyElement extends ReplacedElement {
   Widget toWidget(RenderContext context) {
     dom.Node textNode = null;
     List<Widget> widgets = List<Widget>();
-    final rubySize = max(9.0, context.style.fontSize / 2);
+    //TODO calculate based off of parent font size.
+    final rubySize = max(9.0, context.style.fontSize.size / 2);
     final rubyYPos = rubySize + 2;
     element.nodes.forEach((c) {
       if (c.nodeType == dom.Node.TEXT_NODE) {

lib/src/styled_element.dart

@@ -88,7 +88,7 @@ StyledElement parseStyledElement(
       break;
     case "big":
       styledElement.style = Style(
-        fontSize: 20.0,
+        fontSize: FontSize.larger,
       );
       break;
     case "blockquote":
@@ -176,47 +176,47 @@ StyledElement parseStyledElement(
       break;
     case "h1":
       styledElement.style = Style(
-        fontSize: 28.0,
+        fontSize: FontSize.xxLarge,
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 18.67),
         display: Display.BLOCK,
       );
       break;
     case "h2":
       styledElement.style = Style(
-        fontSize: 21.0,
+        fontSize: FontSize.xLarge,
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 17.5),
         display: Display.BLOCK,
       );
       break;
     case "h3":
       styledElement.style = Style(
-        fontSize: 16.5,
+        fontSize: FontSize(16.38),
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 16.5),
         display: Display.BLOCK,
       );
       break;
     case "h4":
       styledElement.style = Style(
-        fontSize: 14.0,
+        fontSize: FontSize.medium,
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 18.5),
         display: Display.BLOCK,
       );
       break;
     case "h5":
       styledElement.style = Style(
-        fontSize: 11.5,
+        fontSize: FontSize(11.62),
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 19.25),
         display: Display.BLOCK,
       );
       break;
     case "h6":
       styledElement.style = Style(
-        fontSize: 9.5,
+        fontSize: FontSize(9.38),
         fontWeight: FontWeight.bold,
         margin: EdgeInsets.symmetric(vertical: 22),
         display: Display.BLOCK,
@@ -324,7 +324,7 @@ StyledElement parseStyledElement(
       break;
     case "small":
       styledElement.style = Style(
-        fontSize: 10.0,
+        fontSize: FontSize.smaller,
       );
       break;
     case "strike":
@@ -333,14 +333,14 @@ StyledElement parseStyledElement(
       continue bold;
     case "sub":
       styledElement.style = Style(
-        fontSize: 10.0,
-        baselineOffset: -1,
+        fontSize: FontSize.smaller,
+        verticalAlign: VerticalAlign.SUB,
       );
       break;
     case "sup":
       styledElement.style = Style(
-        fontSize: 10.0,
-        baselineOffset: 1,
+        fontSize: FontSize.smaller,
+        verticalAlign: VerticalAlign.SUPER,
       );
       break;
     case "tt":