Add support for auto horizontal margins

[zbarbuto]

Adds support for margin: auto style centering.

A pretty common centering pattern in HTML/CSS is to give a left and right margin value of auto. Further, some WYSIWYG editors that output HTML will use this to center content like images instead of text-align.

As a basic example:

<p> This is some pre-text</p>
<div style="width: 150px; margin: auto; background-color: salmon;">I am centered!</div>
<p> This is some post-text</p>

Typically renders as (screenshot is from Chrome):

This PR adds support for margin: auto by changing margin storage from plain EdgeInsets to a new Margins class which wraps left, top, right, and bottom Margin values. This allows storing a raw double value as before but also to flag the particular edge as auto allowing it to be wrapped in a Row to center it if needed.

I have updated the example project with a few samples:

      <div style="width: 150px; height: 20px; background-color: red; margin: auto;">Centered Div</div>
      <div style="width: 150px; height: 20px; background-color: yellow; margin-left: auto;">margin-left: auto div</div>

Both of which now render as expected (screenshot is on an iPad):

FTR I assume ContainerSpan forms the wrapper for most elements so this would also make it work for things like img?

[zbarbuto]

Sadly doesn't seem to work with images - any advice on what I need to change to support this? Would applying the same wrapper in _recursiveLexer be the best place?

[zbarbuto]

Sorry for the ping @erickok but do you have any feedback here and/or any advice for the best way I can make this work for inline images as well?

[erickok]

This isn't so easy to achieve I suspect but I haven't had time to take a deep dive into it due to time limitations on my side.

[zbarbuto]

I managed to get it working for images as well with a few tweaks:

Turns out there was a bug in the image renderer which wasn't passing the correct context (and, hence, styles) to the image which I have pull requested separately as #886

[zbarbuto]

Have rebased on latest master.

[zbarbuto]

The Dart auto-formatter seems to have been a bit aggressive - is there a custom print-width I need to use or something to avoid the extra unnecessary diffs?

[erickok]

Unfortunaly over time we seem to have used different formatting standards (including line width) and I fear any application of a since format now would cause code changes. We should really do that one time.

[tneotia]

Yeah the formatter did go a bit crazy, especially in the most recent commit. I would suggest turning off auto format in VSCode and either clearing the current branch of its changes, or creating a new PR with the core changes (formatting left out).

Also this would be a breaking change in our library API as the style param would now take Margin instead of EdgeInsets.

[tneotia]

@zbarbuto due to all changes from the customRender PR, there are conflicts that need to be resolved now, just FYI

[zbarbuto]

@tneotia No problems.

Please leave this PR open for now and hopefully I'll have some time this week rebase on master without the auto-format changes rather than make a new one.

[zbarbuto]

@tneotia Ok I've cleaned the diffs and fixes a few issues that were inconsistent with normal HTML behaviour. The demo has been updated to show these edge-cases:

I previously was always center-aligning images that had auto horizontal margins but normal behaviour is to only do this if they are explicitly display: block (I'm guessing images are implicitly inline-block)

[zbarbuto]

Whoops - typo in the fuschia example - fixed:

[tneotia]

@zbarbuto #661 is merged, I promise this will be the last conflict resolve you have to do :)

[zbarbuto]

I have rebased and applied my changes. There is an issue that has come up after rebase in that divs are not displaying as block-level correctly which breaks their alignment (see the coloured examples below):

For now, I am considering fixing this outside the scope of this pull request as it is currently broken on master anyway. i.e. the following:

      <div style="width: 150px; height: 20px; background-color: #ff9999;">Div A</div>
      <div style="width: 150px; height: 20px; background-color: #99ff99;">Div B</div>
      <div style="width: 150px; height: 20px; background-color: #ff99ff;">Div C</div>

Renders in a blank project using flutter_html as:

But in regular HTML e.g. in a CodePen as:

If this issue is fixed independently the alignment feature of this pull request should work as expected.

[zbarbuto]

@tneotia sorry for the ping but anything further I need to do on this since it has been rebased?

I can create a separate issue for the block display problem above?

[tneotia]

Sure I would create a separate issue. I don't think anything more needs to be done, just @erickok needs to review.

[Sub6Resources]

Merging this into a new branch enhancement/margin-values so I can continue refinements and get it merged in