Skip to content
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

Tab character in <ol> for font weights bellow w400 #327

Closed
viniciusaro opened this issue Jun 16, 2020 · 3 comments · Fixed by #537
Closed

Tab character in <ol> for font weights bellow w400 #327

viniciusaro opened this issue Jun 16, 2020 · 3 comments · Fixed by #537
Labels
bug Something isn't working

Comments

@viniciusaro
Copy link

viniciusaro commented Jun 16, 2020

Hi, I've noticed a weird character that looks like a tab in <li> elements for ordered lists. It happens only when the content needs a line break and the font weight is w300 or less. Any clues how to solve that?

Here's a minimal example that reproduces the problem (library version 1.0.0):

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

import 'package:flutter_html/style.dart';

const htmlData = """
<ol>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</li>
</ol>
""";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: MyHomePage());
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter_html Example'),
      ),
      body: SingleChildScrollView(
        child: Html(
          data: htmlData,
          style: {
            "*" : Style(fontWeight: FontWeight.w300)
          }
        ),
      ),
    );
  }
}
The Flutter version is 1.17.3 as stated running flutter doctor
• Flutter version 1.17.3 at [...]
• Framework revision b041144f83 (12 days ago), 2020-06-04 09:26:11 -0700
• Engine revision ee76268252
• Dart version 2.8.4

This is a print of a list with FontWeight.w300

Simulator Screen Shot - iPhone 11 Pro - 2020-06-16 at 11 45 23

This is a print of a list with FontWeight.w400

Simulator Screen Shot - iPhone 11 Pro - 2020-06-16 at 11 45 27

@ryan-berger
Copy link
Collaborator

Strange. I'll take a look at this this weekend.

@ryan-berger ryan-berger added the bug Something isn't working label Jun 26, 2020
@diegoalex
Copy link

I had the same issue .
This workaround save my day 🙂

Html( data: myData.html_content, style: { "ul": Style(fontWeight: FontWeight.w400) }, );

@tneotia
Copy link
Collaborator

tneotia commented Feb 10, 2021

Took care of this in the above PR, it was related to the font size. Basically it now has a separate text widget just for the tab character without any text styling so the unknown character box doesn't show up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
4 participants