feat: Update CssBoxWidget to handle rtl marker boxes (#1270)

Author: Sub6Resources

example/lib/main.dart

@@ -296,11 +296,11 @@ class MyHomePageState extends State<MyHomePage> {
               backgroundColor: const Color.fromARGB(0x50, 0xee, 0xee, 0xee),
             ),
             "th": Style(
-              padding: const EdgeInsets.all(6),
+              padding: HtmlPaddings.all(6),
               backgroundColor: Colors.grey,
             ),
             "td": Style(
-              padding: const EdgeInsets.all(6),
+              padding: HtmlPaddings.all(6),
               border: const Border(bottom: BorderSide(color: Colors.grey)),
             ),
             'h5': Style(maxLines: 2, textOverflow: TextOverflow.ellipsis),

lib/src/builtins/styled_element_builtin.dart

@@ -176,7 +176,6 @@ class StyledElementBuiltIn extends HtmlExtension {
         continue italics;
       case "div":
         styledElement.style = Style(
-          margin: Margins.all(0),
           display: Display.block,
         );
         break;
@@ -338,14 +337,22 @@ class StyledElementBuiltIn extends HtmlExtension {
         styledElement.style = Style(
           display: Display.block,
           listStyleType: ListStyleType.decimal,
-          padding: const EdgeInsets.only(left: 40),
+          padding: HtmlPaddings.only(inlineStart: 40),
+          margin: Margins(
+            blockStart: Margin(1, Unit.em),
+            blockEnd: Margin(1, Unit.em),
+          ),
         );
         break;
       case "ul":
         styledElement.style = Style(
           display: Display.block,
           listStyleType: ListStyleType.disc,
-          padding: const EdgeInsets.only(left: 40),
+          padding: HtmlPaddings.only(inlineStart: 40),
+          margin: Margins(
+            blockStart: Margin(1, Unit.em),
+            blockEnd: Margin(1, Unit.em),
+          ),
         );
         break;
       case "p":

lib/src/css_box_widget.dart

@@ -56,16 +56,19 @@ class CssBoxWidget extends StatelessWidget {
         ? _generateMarkerBoxSpan(style)
         : null;
 
+    final direction = _checkTextDirection(context, textDirection);
+    final padding = style.padding?.resolve(direction);
+
     return _CSSBoxRenderer(
       width: style.width ?? Width.auto(),
       height: style.height ?? Height.auto(),
-      paddingSize: style.padding?.collapsedSize ?? Size.zero,
+      paddingSize: padding?.collapsedSize ?? Size.zero,
       borderSize: style.border?.dimensions.collapsedSize ?? Size.zero,
       margins: style.margin ?? Margins.zero,
       display: style.display ?? Display.inline,
       childIsReplaced: childIsReplaced,
       emValue: _calculateEmValue(style, context),
-      textDirection: _checkTextDirection(context, textDirection),
+      textDirection: direction,
       shrinkWrap: shrinkWrap,
       children: [
         Container(
@@ -74,7 +77,7 @@ class CssBoxWidget extends StatelessWidget {
             color: style.backgroundColor, //Colors the padding and content boxes
           ),
           width: _shouldExpandToFillBlock() ? double.infinity : null,
-          padding: style.padding ?? EdgeInsets.zero,
+          padding: padding,
           child: top
               ? child
               : MediaQuery(
@@ -224,8 +227,8 @@ class _CSSBoxRenderer extends MultiChildRenderObjectWidget {
   final bool shrinkWrap;
 
   @override
-  _RenderCSSBox createRenderObject(BuildContext context) {
-    return _RenderCSSBox(
+  RenderCSSBox createRenderObject(BuildContext context) {
+    return RenderCSSBox(
       display: display,
       width: width..normalize(emValue),
       height: height..normalize(emValue),
@@ -239,7 +242,7 @@ class _CSSBoxRenderer extends MultiChildRenderObjectWidget {
   }
 
   @override
-  void updateRenderObject(BuildContext context, _RenderCSSBox renderObject) {
+  void updateRenderObject(BuildContext context, RenderCSSBox renderObject) {
     renderObject
       ..display = display
       ..width = (width..normalize(emValue))
@@ -253,10 +256,21 @@ class _CSSBoxRenderer extends MultiChildRenderObjectWidget {
   }
 
   Margins _preProcessMargins(Margins margins, bool shrinkWrap) {
-    Margin leftMargin = margins.left ?? Margin.zero();
-    Margin rightMargin = margins.right ?? Margin.zero();
-    Margin topMargin = margins.top ?? Margin.zero();
-    Margin bottomMargin = margins.bottom ?? Margin.zero();
+    late Margin leftMargin;
+    late Margin rightMargin;
+    Margin topMargin = margins.top ?? margins.blockStart ?? Margin.zero();
+    Margin bottomMargin = margins.bottom ?? margins.blockEnd ?? Margin.zero();
+
+    switch (textDirection) {
+      case TextDirection.rtl:
+        leftMargin = margins.left ?? margins.inlineEnd ?? Margin.zero();
+        rightMargin = margins.right ?? margins.inlineStart ?? Margin.zero();
+        break;
+      case TextDirection.ltr:
+        leftMargin = margins.left ?? margins.inlineStart ?? Margin.zero();
+        rightMargin = margins.right ?? margins.inlineEnd ?? Margin.zero();
+        break;
+    }
 
     //Preprocess margins to a pixel value
     leftMargin.normalize(emValue);
@@ -295,12 +309,14 @@ class _CSSBoxRenderer extends MultiChildRenderObjectWidget {
   }
 }
 
+@visibleForTesting
+
 /// Implements the CSS layout algorithm
-class _RenderCSSBox extends RenderBox
+class RenderCSSBox extends RenderBox
     with
         ContainerRenderObjectMixin<RenderBox, CSSBoxParentData>,
         RenderBoxContainerDefaultsMixin<RenderBox, CSSBoxParentData> {
-  _RenderCSSBox({
+  RenderCSSBox({
     required Display display,
     required Width width,
     required Height height,
@@ -593,7 +609,20 @@ class _RenderCSSBox extends RenderBox
       final offsetHeight = distance -
           (markerBox.getDistanceToBaseline(TextBaseline.alphabetic) ??
               markerBox.size.height);
-      markerBoxParentData.offset = Offset(-markerBox.size.width, offsetHeight);
+      switch (_textDirection) {
+        case TextDirection.rtl:
+          markerBoxParentData.offset = Offset(
+            child.size.width,
+            offsetHeight,
+          );
+          break;
+        case TextDirection.ltr:
+          markerBoxParentData.offset = Offset(
+            -markerBox.size.width,
+            offsetHeight,
+          );
+          break;
+      }
     }
   }
 
@@ -701,10 +730,11 @@ class _RenderCSSBox extends RenderBox
     }
 
     return Margins(
-        left: marginLeft,
-        right: marginRight,
-        top: margins.top,
-        bottom: margins.bottom);
+      left: marginLeft,
+      right: marginRight,
+      top: margins.top,
+      bottom: margins.bottom,
+    );
   }
 
   @override