Allows to control the image content alignment.

[Skyost]

A use case could be when flutter_tex_js is used to render HTML content. For instance :

is more beautiful than :

[amake]

I presume you have a Column of widgets in your Dart code.

Try setting the crossAxisAlignment to CrossAxisAlignment.start.

[amake]

Sorry, I now realize that I may not be understanding some nuance of your use case.

Please see this example that illustrates my suggestion above: 46d6b7b

If you remove the crossAxisAlignment: CrossAxisAlignment.start then everything will be centered, but with that setting in place everything correctly justifies to the left.

If that doesn't cover your use case, can you provide some sample code? It sounds like maybe you're using TexImage with the flutter_html package, and somehow that's causing the widget's width to always be as wide as possible?

[Skyost]

In fact, I've already set crossAxisAlignment to start (see code here). I've put flutter_tex_js in a Container, causing the inner image to be as wide as possible (see code here) ; with color set to red :

[amake]

Thanks for the details and for the links.

I tried reproducing with my example and found that the Container (and its transform) is not the cause of the widening. I think it must be something about how flutter_html lays out its contents.

When I forced a similar situation in my example app by wrapping with a Container(width: double.infinity, ...), I found that wrapping TexImage with Align(alignment: Alignment.centerLeft, child: TexImage(...)) fixed the problem. Does that work for you?

I apologize if it seems like I'm going out of my way to reject your PR. I think it's probably a reasonable addition. My main concern however is that we don't offer a workaround that obscures other, more serious problems with the layout.

[Skyost]

I found that wrapping TexImage with Align(alignment: Alignment.centerLeft, child: TexImage(...)) fixed the problem.

I've already tried to do that :

And the problem is that all math containers go full left :

I apologize if it seems like I'm going out of my way to reject your PR.

Hey no problem, it's your project after all 😄

My main concern however is that we don't offer a workaround that obscures other, more serious problems with the layout.

You may be interested by the widget tree, so here's a part of it :

[amake]

Right, Align would only be good for the block math elements, not the inline ones.

I note also that you are using displayMode: false for all cases. I think this should only be false for inline elements; is there a reason you're not doing that?

If you can distinguish between block and inline elements then I would recommend using Align and displayMode: true for block elements and your current setup for inline elements.

If you really can't distinguish them, then I guess that right there is the use case for your PR.

[Skyost]

I really can't distinguish them as it's mostly user-generated content written with $ tags only (tags like \[ \] are not allowed). Therefore, all my math elements are inline elements.

[amake]

OK, thanks for your patience. I made some adjustments.

I'll cut a new release shortly.

[Skyost]

Cool, and thanks for this awesome library ! 😉

[amake]

This is released as v1.2.0.