Ensures that text is scaled properly using accessibility fonts. #333

edwardaux · 2020-06-20T05:48:50Z

This resolves #308, but as noted in the comment does rely on flutter/flutter#59711. That fix is currently in the master channel, but I'm not sure when it will find its way out into the stable release.

Normal font	Larger font

…ub6Resources#308

lukeurban · 2020-06-24T13:50:22Z

lib/html_parser.dart

+    return StyledText(
+      textSpan: parsedTree, 
+      style: cleanedTree.style,
+      textScaleFactor: MediaQuery.of(context).textScaleFactor,


This should be added as a parameter, It's still breaking accessibility functions. When textScaleFactor != 1.0. But I've tried to do it, still was breaking view.

I have a branch with a working solution. This does everything you did plus, what's not working for me. Don't have permission to push it tho xD.

I agree that being able to pass in textScaleFactor would be a useful enhancement. I'll push up a change containing that today.

When you say that it is "still breaking accessibility functions", I'm not sure what you mean. What is broken?

As screenshots are showing when I am allowing the user to define textScaleFactor via accessibility functions on his phone (I've made font smaller, not bigger). Everything was shifted to the left and smaller (mainly width). (this will be later fixed in flutter/flutter#59711) I've modified my local flutter code to verify.

ok. I see now... so, I imagine the width problem will be resolved with the Flutter PR you mentioned... I'm just trying to work out if you're saying there needs to be additional changes beyond a) the changes in this PR and b) the Flutter PR.

Any updates on this? I just tested this branch and the content no longer overflows the screen for me, but still overflows its container to the right. (On both flutter channels beta and master).

ryan-berger

One small gripe, but I'm sure you have a good answer for me. Once this is cleared up we can merge it

ryan-berger · 2020-06-28T04:06:33Z

lib/html_parser.dart


  const StyledText({
    this.textSpan,
    this.style,
+    this.textScaleFactor = 1.0,


Is there a reason to default this and make it a property of StyledText? Are we exposing it somewhere else?

The underlying problem we have here is that RichText (which is what Rich.text() ultimately creates) will take the textScaleFactor that is passed to it and will rescale based on that. Due to the way that we're constructing the widget tree, we have nested RichText objects so if textScaleFactor is anything other than 1.0, then we end up with the scaling getting applied multiple times.

By defaulting to 1.0, we allow StyledText objects to be created all over the place with the correct internal scaling value. And then, on line 74, just before we return the final widget tree in the build() function we create one more outermost StyledText but this time we pass in the real scaling factor so that everything underneath gets scaled correctly. Hope that makes sense.

This makes sense. When I asked I was just doing general code review since I haven't had time to take a look at the specific issue or even run the PR.

After running it, reading what you had to say and actually reading the code, everything looks okay, I don't see any problems with this, I will merge it.

ryan-berger

This looks good to me. Hopefully that text-wrapping PR lands soon so that this library can become fully operational.

mileusna · 2020-06-29T14:45:00Z

So which flutter version and flutter_html version should I use to have this work properly with font enlargement or should I still wait?

I'm still on flutter 1.12.13 and flutter_html-pre due to this bug, since on that setup everytnig works as it should in my app.

erickok · 2020-06-29T15:47:07Z

There are no stable releases yet of Flutter that will not have this issue, if you use flutter_html pre-1.0 or later. (You could use the Flutter master channel if you want, but you will be on bleeding edge for every change. If so, you also need to use master channel of flutter_html.)

lukeurban · 2020-06-29T21:41:54Z

I recommend use beta and change this one line every time until they change it xD works

thenexus00 · 2020-07-02T02:01:14Z

Any update on this or ETA?
We have a big app update pushed out on IOS but the Android is on hold because SOME Android X devices the text is massive.
I think setting this default scale factor is the key because it seems different Android X flavours Accessibility settings consider a different default for the font scale. I have tried everything else under the sun and this only seems to be the real fix.

edwardaux · 2020-07-02T07:17:47Z

FWIW, the fix in this PR addresses the scaling problem that this library suffered from.

However, there is a problem in the Futter SDK (that is being addressed in flutter/flutter#59711 and flutter/flutter#60021) that means the wrapping isn't working properly.

Right now, it is still only available in the master channel, but I expect it to be in the next dev channel in a week or so. If you want that fix, you'll have to use a later (presumably less stable) channel.

thenexus00 · 2020-07-05T11:48:21Z

FWIW, the fix in this PR addresses the scaling problem that this library suffered from.

However, there is a problem in the Futter SDK (that is being addressed in flutter/flutter#59711 and flutter/flutter#60021) that means the wrapping isn't working properly.

Right now, it is still only available in the master channel, but I expect it to be in the next dev channel in a week or so. If you want that fix, you'll have to use a later (presumably less stable) channel.

On the Master Branch and it is not fixed. Checking lib/html_parser.dart the line does not appear to be updated.

edwardaux · 2020-07-05T21:40:55Z

Ah, I think the problem is even though this PR has been merged, there hasn't been a new release (eg v1.0.1) created that contains it. I haven't tested it but, for now, you should be able to use something like this in your pubspec.yml file:

dependencies:
  flutter_html:
    git:
      url: git@github.com:Sub6Resources/flutter_html.git

thenexus00 · 2020-07-06T06:53:11Z

Ah, I think the problem is even though this PR has been merged, there hasn't been a new release (eg v1.0.1) created that contains it. I haven't tested it but, for now, you should be able to use something like this in your pubspec.yml file:
dependencies:
  flutter_html:
    git:
      url: git@github.com:Sub6Resources/flutter_html.git

Thanks, that gives a hostkey error but that git only seems to have v1.0.0 still anyway

ferencDobi · 2020-07-06T07:34:42Z

The correct way is:

  flutter_html:
    git:
      url: git://github.com/Sub6Resources/flutter_html.git

thenexus00 · 2020-07-07T02:02:34Z

The correct way is:

  flutter_html:
    git:
      url: git://github.com/Sub6Resources/flutter_html.git

Thanks,
Looks like the wrapping does indeed still need to also exist in the master branch.

    BoxConstraints(maxWidth: constraints.maxWidth) / textScaleFactor,

Which is not there yet :(

Ensures that text is scaled properly using accessibility fonts. Issue S…

d0b6b42

…ub6Resources#308

erickok mentioned this pull request Jun 23, 2020

Right overflow on some devices #334

Closed

lukeurban reviewed Jun 24, 2020

View reviewed changes

ryan-berger requested changes Jun 28, 2020

View reviewed changes

ryan-berger approved these changes Jun 29, 2020

View reviewed changes

ryan-berger merged commit 5a88676 into Sub6Resources:master Jun 29, 2020

edwardaux deleted the bugfix/test-scaling branch July 2, 2020 04:27

ueman mentioned this pull request Jul 9, 2020

fix android scaling #348

Closed

edwardaux mentioned this pull request Aug 2, 2020

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

Closed

erickok mentioned this pull request Feb 8, 2021

The view does not fill the screen #294

Closed

NemoChen317 mentioned this pull request Dec 9, 2021

[QUESTION] when i use video mp4 throw exception #930

Closed

Equirinya mentioned this pull request Aug 5, 2023

[BUG] <p> tags within table results in the HTML widget disappearing #1351

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensures that text is scaled properly using accessibility fonts. #333

Ensures that text is scaled properly using accessibility fonts. #333

edwardaux commented Jun 20, 2020 •

edited

Loading

lukeurban Jun 24, 2020 •

edited

Loading

lukeurban Jun 24, 2020

edwardaux Jun 24, 2020

lukeurban Jun 25, 2020

edwardaux Jun 26, 2020

ferencDobi Jun 29, 2020

ryan-berger left a comment

ryan-berger Jun 28, 2020

edwardaux Jun 28, 2020

ryan-berger Jun 29, 2020

ryan-berger left a comment

mileusna commented Jun 29, 2020 •

edited

Loading

erickok commented Jun 29, 2020 •

edited

Loading

lukeurban commented Jun 29, 2020

thenexus00 commented Jul 2, 2020

edwardaux commented Jul 2, 2020

thenexus00 commented Jul 5, 2020

edwardaux commented Jul 5, 2020

thenexus00 commented Jul 6, 2020

ferencDobi commented Jul 6, 2020

thenexus00 commented Jul 7, 2020

Ensures that text is scaled properly using accessibility fonts. #333

Ensures that text is scaled properly using accessibility fonts. #333

Conversation

edwardaux commented Jun 20, 2020 • edited Loading

lukeurban Jun 24, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryan-berger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryan-berger left a comment

Choose a reason for hiding this comment

mileusna commented Jun 29, 2020 • edited Loading

erickok commented Jun 29, 2020 • edited Loading

lukeurban commented Jun 29, 2020

thenexus00 commented Jul 2, 2020

edwardaux commented Jul 2, 2020

thenexus00 commented Jul 5, 2020

edwardaux commented Jul 5, 2020

thenexus00 commented Jul 6, 2020

ferencDobi commented Jul 6, 2020

thenexus00 commented Jul 7, 2020

edwardaux commented Jun 20, 2020 •

edited

Loading

lukeurban Jun 24, 2020 •

edited

Loading

mileusna commented Jun 29, 2020 •

edited

Loading

erickok commented Jun 29, 2020 •

edited

Loading