Skip to content

[FEATURE] align support #1071

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TheCarpetMerchant opened this issue May 24, 2022 · 8 comments
Open

[FEATURE] align support #1071

TheCarpetMerchant opened this issue May 24, 2022 · 8 comments
Assignees
Labels
enhancement New feature or request

Comments

@TheCarpetMerchant
Copy link

I'm not seeing the align tag in the Supported list, but text-align is, for example.
Could it be possible to provide support for align, ie this being centered :

Html(
        data: '<p align="center">Some text</p>',
      ),
@TheCarpetMerchant TheCarpetMerchant added the enhancement New feature or request label May 24, 2022
@erickok
Copy link
Contributor

erickok commented Jun 10, 2022

This property is deprecated and not (officially) supported in html5. I am not sure if we should therefor support it in our package. On the other hand, we did decide to add support for the similarly deprecated font tag (see #277) so I guess we could?

@TheCarpetMerchant
Copy link
Author

Well, there's probably an immense amount of HTML out there that still uses it, so I'd say it makes sense.

@Sub6Resources
Copy link
Owner

Wouldn't hurt for backwards compatibility. Obviously we must draw the line somewhere when it comes to deprecated items. I'll look into this.

@Sub6Resources Sub6Resources self-assigned this Jun 10, 2022
@TheCarpetMerchant
Copy link
Author

@Sub6Resources I think it should have to do with usefulness and willingness.
In this case, I suppose you already have what's needed to handle alignment ; it would just be a matter to use that what this attribute is present in addition to the other tags/attributes triggering that functionality.
I hope so at least :)

@Sub6Resources
Copy link
Owner

I agree. Shouldn't be too hard using those parameters. Thanks @TheCarpetMerchant

@TheCarpetMerchant
Copy link
Author

Following up on this ; At first glance I'm seeing that Style.alignment is a thing. So parsing the align into that (I suppose from the HtmlParser.build method) seems like an easy solution.
The question would be : does this override the potentially already-provided alignment (from the custom styles) ?
Another solution would be to adapt the style directly : if the css doesn't provide an alignment, create one from the align parameter if it exists before the parsing of css_parser.dart.

@Sub6Resources
Copy link
Owner

Yes, there are a couple other elements that use the inline attributes for styling purposes. I'm pretty busy and can't promise a quick implementation, but you are more than welcome to submit a pull request!

@Sub6Resources Sub6Resources added this to the 3.0.0 milestone Aug 20, 2022
@Andreigr0
Copy link

Used such workaround, seems to be working
Version 3.0.0-alpha5

class AppHtmlView extends StatelessWidget {
  final String html;
  final EdgeInsets? margin;
  final TextAlign? textAlign;

  const AppHtmlView({
    super.key,
    required this.html,
    this.margin,
    this.textAlign,
  });

  @override
  Widget build(BuildContext context) {
    TextAlign? textAlign;

    return Html(
      data: html,
      customRenders: {
        (RenderContext c) {
          final el = c.tree.element;
          final isCenterElement = el?.localName == 'center';
          if (isCenterElement) {
            textAlign = TextAlign.center;
            return isCenterElement;
          }

          final style = el?.attributes['style'];
          if (style == null) return false;

          textAlign = null;
          for (final s in style.split(';')) {
            if (!s.startsWith('text-align')) continue;
            textAlign = TextAlign.values
                .firstWhereOrNull((e) => e.name == s.split(':').last.trim());
            break;
          }

          return textAlign != null;
        }: CustomRender.widget(
          widget: (c, _) => SizedBox(
            width: MediaQuery.of(context).size.width,
            child: AppHtmlView(
              html: c.tree.element!.innerHtml,
              textAlign: textAlign,
              margin: EdgeInsets.zero,
            ),
          ),
        ),
      },
      shrinkWrap: true,
      style: {
        '*': Style(
          textAlign: this.textAlign,
          margin: margin,
        ),
      },
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Todo
Development

No branches or pull requests

4 participants