Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.76k stars 814 forks source link

Ver 1.0.0 : FontSize(this.size) - strange behavior #289

Closed pamir72 closed 3 years ago

pamir72 commented 4 years ago

if you make the font larger in your phone settings, font size from FontSize(this.size) looks more larger, the right border is defined incorrectly, word wrap is also incorrect.

But there was no such problem until version 1.0.0 !

komaromil commented 4 years ago

Upgrading to 1.0.0 on Android device Fontsize is not the same than in previous versions - strange size - but it seems good on ios. There is a problem with the right side only - text flows out of the screen - on Android device. (See attached image) It looks like:

20200515_073258

veresvit commented 4 years ago

The text scaling is not in sync with regular font scaling when user has a system Font size different than default.

tantotea commented 4 years ago

v1.0.0 in iPhone follows dynamic text size but the larger text size is much larger than it should be.

simone40love commented 4 years ago

The html is not wrapping if the font size is bigger than the default.

        "body": Style(
          fontSize: FontSize(30.0),
        ),
acanteror commented 4 years ago

Same problem here, text and more html content (with and without customRender) flows out of the screen and the elements size is too much big. This just occurs with some devices. For example: Works wrong in:

It looks like Screenshot_2020-05-20-20-59-56-260_com aspgems neurok mobile app dev

RomanKapshuk commented 4 years ago

Same issue with right border of content on some devices (e.g. Samsung S10 or any else device with textScaleFactor > 1.0). Any updates?

RomanKapshuk commented 4 years ago

As hotfix you can wrap html parser with MediaQuery widget with textScaleFactor: 1.0. Then to achieve resizing according to system's real scale factor just multiply fontSize in all of your custom Styles (in styles map and customRender) by your real scale factor. In this case you need to save your real scale factor with context that does not belong to your custom MediaQuery widget tree in some global/static variable.

See the example

...
build: (context) {
GlobalDataStorage.realDeviceScaleFactor = MediaQuery.of(context).textScaleFactor;
return MediaQuery(
data: MediaQueryData(textScaleFactor: 1.0, [other values should be provided from your real MediaQuery])
child: YourWidgetWithHtmlParserInside(),
)}

class YourWidgetWithHtmlParserInside ... {
...
build: (context){
return Html(
styles: {
'*':  Style(fontSize: yourFontSize * GlobalDataStorage.realDeviceScaleFactor);
});}
}`
VietTho1989 commented 4 years ago

hotfix: set textScaleFactor entire application in main.dart return MaterialApp( builder: (context, child) { return MediaQuery( child: child, data: data.copyWith( textScaleFactor: 1.0 ), ); }, );

RomanKapshuk commented 4 years ago

@VietTho1989 Yes, you can do like this. But if you want support of accessibilities features what iOS or Android provides (like large font size for people with poor eyesight) – it's not a good idea. Up to you.

edwardaux commented 3 years ago

stumbled across this issue and realise that I created what is essentially a duplicate in #308. The good news is that I think I have a fix and will push up a PR soon.

DFelten commented 3 years ago

@edwardaux Did you find a solution for this? I'm looking forward to your PR :)

edwardaux commented 3 years ago

Yep: https://github.com/Sub6Resources/flutter_html/pull/333 has been merged into master which gets us part-way there.

However, the maintainers of this project will need to cut a new release that contains that fix (unless you want to pull in via a commit id).

Probably more importantly, though, it depends on a Flutter bug being fixed which I raised in https://github.com/flutter/flutter/issues/59316. There are two PRs for that https://github.com/flutter/flutter/pull/59711 and https://github.com/flutter/flutter/pull/60021, but I'm not sure what timeframe or flutter release they're going to eventually be released in.

erickok commented 3 years ago

This was eventually fixed and released via #333.