Blurry text in HTML5 target

Help
#1

Hello everyone! Earch for information about this problem and found that’s why I write here.

I incorporated a text that looks perfect on all targets least in HTML5, is blurry, View Screenshot

These are the properties that give the text.

var font = Assets.getFont("fonts/OpenSans-Regular.ttf");
var textFormat:TextFormat = new TextFormat();
textFormat.font = font.fontName;
textFormat.size = 13;
textFormat.color = 0xFFFFFF;
textFormat.leading = -7;
textFormat.align = TextFormatAlign.JUSTIFY;
var text:TextField = new TextField();
text.autoSize = TextFieldAutoSize.CENTER;
text.selectable = false;
text.multiline = true;
text.defaultTextFormat = textFormat;

If anyone had the same problem and knows how to fix it I really appreciate it.

regards

HTML5 Canvas, blurry bitmap rendering [ SOLVED ]
#2

try setting one of the following line in the project xml file :

<haxedef name="dom" if="html5" />

OR

<set name="html5-backend" value="openfl-bitfive" />

but well, it depends of the openfl version you are using (I’m still using 2.2.6)

#3

How does it look if you use LEFT, no auto size, and text that’s less than the length of the TextField?

If you can get it to look sharper, then it would be simpler to identify when it goes blurry (perhaps due to one of the above options)

#4

This I worked perfect, thanks!

#5

Could someone briefly enlighten me as to why this works? What was the underlying issue here, and how did this change therefore resolve it? I’ve never seen “blurry” text in an HTML environment before. I’m quite curious . . .

#6

-Ddom enables “DOM mode” which uses distinct DOM elements for separate objects. It uses combinations of DIV, Canvas, Image (etc) tags as appropriate, and CSS2 animation for positioning.

The default is “Canvas mode” which uses a single canvas element and blits to it. This changes the text to use canvas text rendering instead of a DIV, that’s the first difference, also, the default behavior for HTML5 is to scale and letterbox your project, so it works best with multiple mobile devices as well as the desktop. This CSS scaling can result in blurrier text, setting the width/height to 0 and handling the scale yourself, or using a custom index.html template with a fixed container DIV width/height can change this scaling behavior.

This is disabled in DOM mode right now, because it’s harder to scale content which overflows (as a DOM element might) unlike the canvas which is always exactly the size requested