Merge pull request #901 from tneotia/feature/text-transform

Support text transform CSS (#894)

Author: erickok

lib/html_parser.dart

@@ -446,7 +446,7 @@ class HtmlParser extends StatelessWidget {
       );
     } else if (tree is ReplacedElement) {
       if (tree is TextContentElement) {
-        return TextSpan(text: tree.text);
+        return TextSpan(text: tree.text?.transformed(tree.style.textTransform));
       } else {
         return WidgetSpan(
           alignment: tree.alignment,

lib/src/css_parser.dart

@@ -230,6 +230,7 @@ Style declarationsToStyle(Map<String, List<css.Expression>> declarations) {
                 break;
             }
           }
+          break;
         case 'height':
           style.height = ExpressionMapping.expressionToPaddingLength(value.first) ?? style.height;
           break;
@@ -337,6 +338,18 @@ Style declarationsToStyle(Map<String, List<css.Expression>> declarations) {
         case 'text-shadow':
           style.textShadow = ExpressionMapping.expressionToTextShadow(value);
           break;
+        case 'text-transform':
+          final val = (value.first as css.LiteralTerm).text;
+          if (val == 'uppercase') {
+            style.textTransform = TextTransform.uppercase;
+          } else if (val == 'lowercase') {
+            style.textTransform = TextTransform.lowercase;
+          } else if (val == 'capitalize') {
+            style.textTransform = TextTransform.capitalize;
+          } else {
+            style.textTransform = TextTransform.none;
+          }
+          break;
         case 'width':
           style.width = ExpressionMapping.expressionToPaddingLength(value.first) ?? style.width;
           break;

lib/src/utils.dart

@@ -1,8 +1,8 @@
 import 'dart:convert';
 import 'dart:math';
 
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_html/style.dart';
 
 Map<String, String> namedColors = {
   "White": "#FFFFFF",
@@ -81,4 +81,34 @@ String getRandString(int len) {
   var random = Random.secure();
   var values = List<int>.generate(len, (i) =>  random.nextInt(255));
   return base64UrlEncode(values);
+}
+
+extension TextTransformUtil on String? {
+  String? transformed(TextTransform? transform) {
+    if (this == null) return null;
+    if (transform == TextTransform.uppercase) {
+      return this!.toUpperCase();
+    } else if (transform == TextTransform.lowercase) {
+      return this!.toLowerCase();
+    } else if (transform == TextTransform.capitalize) {
+      final stringBuffer = StringBuffer();
+
+      var capitalizeNext = true;
+      for (final letter in this!.toLowerCase().codeUnits) {
+        // UTF-16: A-Z => 65-90, a-z => 97-122.
+        if (capitalizeNext && letter >= 97 && letter <= 122) {
+          stringBuffer.writeCharCode(letter - 32);
+          capitalizeNext = false;
+        } else {
+          // UTF-16: 32 == space, 46 == period
+          if (letter == 32 || letter == 46) capitalizeNext = true;
+          stringBuffer.writeCharCode(letter);
+        }
+      }
+
+      return stringBuffer.toString();
+    } else {
+      return this;
+    }
+  }
 }

lib/style.dart

@@ -191,6 +191,8 @@ class Style {
   ///
   TextOverflow? textOverflow;
 
+  TextTransform? textTransform;
+
   Style({
     this.backgroundColor = Colors.transparent,
     this.color,
@@ -225,6 +227,7 @@ class Style {
     this.markerContent,
     this.maxLines,
     this.textOverflow,
+    this.textTransform = TextTransform.none,
   }) {
     if (this.alignment == null &&
         (display == Display.BLOCK || display == Display.LIST_ITEM)) {
@@ -317,6 +320,7 @@ class Style {
       markerContent: other.markerContent,
       maxLines: other.maxLines,
       textOverflow: other.textOverflow,
+      textTransform: other.textTransform,
     );
   }
 
@@ -354,6 +358,7 @@ class Style {
       wordSpacing: child.wordSpacing ?? wordSpacing,
       maxLines: child.maxLines ?? maxLines,
       textOverflow: child.textOverflow ?? textOverflow,
+      textTransform: child.textTransform ?? textTransform,
     );
   }
 
@@ -391,6 +396,7 @@ class Style {
     Widget? markerContent,
     int? maxLines,
     TextOverflow? textOverflow,
+    TextTransform? textTransform,
     bool? beforeAfterNull,
   }) {
     return Style(
@@ -428,6 +434,7 @@ class Style {
       markerContent: markerContent ?? this.markerContent,
       maxLines: maxLines ?? this.maxLines,
       textOverflow: textOverflow ?? this.textOverflow,
+      textTransform: textTransform ?? this.textTransform,
     );
   }
 
@@ -447,6 +454,7 @@ class Style {
     this.textShadow = textStyle.shadows;
     this.wordSpacing = textStyle.wordSpacing;
     this.lineHeight = LineHeight(textStyle.height ?? 1.2);
+    this.textTransform = TextTransform.none;
   }
 }
 
@@ -561,6 +569,13 @@ enum ListStylePosition {
   INSIDE,
 }
 
+enum TextTransform {
+  uppercase,
+  lowercase,
+  capitalize,
+  none,
+}
+
 enum VerticalAlign {
   BASELINE,
   SUB,