TextField sample with big size

[xvrh]

Hello Bernhard, Thank you for the great samples for textfield! It seems though that there is a problem when using big font (> 128px). For example, here is what I see for half the example:

This is on a mac and on my android device. I cannot test on windows right now but I guess the problem is not there since you don't have it. If we resize the textfield under 128px, everything is back to normal. I suppose this is a bug on webkit for linux/mac platform. I don't know what we can do about it.

[bp74]

Hi Xavier,

I saw the same problem on an Android 4.4 phone but i couldn't figure out what the problem was. On my PC it looks perfectly fine (except IE11 which doesn't load the web fonts correctly, but that's another issue). I will fix the sample to use smaller fonts!

[xvrh]

The IE issue is very strange. I discovered that actually the font is loaded and can render correctly on the canvas if we do it manually. Like this: canvas.context2D.font = "10px Poly, sans-serif"; canvas.context2D.fillText("xxx", 10, 50);

But with the TextField of StageXL it doesn't work while it seems to be exactly the same. Even weirder: if I call fillText() and after I add a TextField with StageXL => It works.

Here is my current super hack in the _FontTester:

 Future wait(Duration timeout) {
   Completer completer = new Completer();
   DateTime timeoutTime = new DateTime.now().add(timeout);
   new Timer.periodic(const Duration(milliseconds: 50), (Timer timer){
     if(isLoaded || timeoutTime.isBefore(new DateTime.now())) {
       timer.cancel();

       _ieFix();

       completer.complete();
     }
   });
   return completer.future;
 }

 _ieFix() {
   String ua = window.navigator.userAgent;
   if (ua.contains('MSIE') || ua.contains('Trident/')) {
     CanvasElement dummyCanvas = new CanvasElement(width: 10, height: 10);
     dummyCanvas.context2D.font = "10px $fontFamily, sans-serif";
     dummyCanvas.context2D.fillText("a", 10, 50);
   }
 }

[bp74]

Thanks for the IE fix, i will try it.

I have reduced the font sizes to 32 and i still see render problems on Android :( Something really strange is going on. Please try if the text looks better on iOS too.

[xvrh]

It is better on my mac but like you say: not perfect.

It seems not related to the font size but to the size of what is rendered to the screen. I will investigate a bit tomorrow at the office.

It is perfect if I reduce the font a bit:

[bp74]

The IE fix improves the font loading, but it does not work every time. From the 8 fonts only 5 or 6 are loaded - if i refresh the browser often the remaining fonts are working but at the same time fonts that worked before are wrong now.

[bp74]

How big is the font in your last example? I will change it to that size. It's a Chrome bug for sure. In Firefox it works perfectly fine on Android - even with font sizes of 150.

[xvrh]

Here is all the sizes that work perfectly: Sugar smash: 25 You win: 51 Sweet: 23 GameOver: 20

The others are ok.

For the IE fix, I'll try that also tomorrow on my windows machine.

[bp74]

Thanks a lot!

[bp74]

Those Chrome bugs look related: https://code.google.com/p/chromium/issues/detail?id=280221 https://code.google.com/p/chromium/issues/detail?id=311731

And the same problems appears in PIXI.JS: http://www.html5gamedevs.com/topic/1550-problem-with-pixitext-rendering-in-chrome/

Do you use a Mac Book with Retina display? I see the problem on my mobile phone which enables the HiDpi feature of StageXL. The display has a "pixelRatio" of 3 and therefore the scaled font size is bigger than 256.

[bp74]

Good news, the Chromium team started working on it: https://code.google.com/p/chromium/issues/detail?id=280221

[xvrh]

Excellent news. You are right that the problem is increased with the pixelRatio and is not only related to the mac or android platform. I see the problem on a retina mac book but not on a non-retina mac book air.

I hope it can be fixed in one or two chrome version.

[xvrh]

I checked in InternetExplorer 11 and this is very random indeed. Even If we wait for several seconds before displaying anything, it doesn't help. We never have the same behavior two times even with locally hosted font.

I have to give up my research for today. But I hope we will find a solution someday.

[bp74]

Sure, i don't think that the issue with IE is a big problem right now.

[bp74]

I did some tests with IE but had no success. I also tried the "Google Font Loader" JavaScipt library which is commonly used to load web fonts, but still no web fonts in IE.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Font Loader</title>
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
  </head>
  <body>
    <canvas id="stage" width="800" height="600" style="border: 1px dotted black; "></canvas>
    <script type="application/dart" src="example17.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Dart

import 'dart:async';
import 'dart:js' as js;
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';

var canvas = html.querySelector('#stage');
var stage = new Stage(canvas, webGL: true);
var renderLoop = new RenderLoop();

void main() {

  renderLoop.addStage(stage);

  // https://github.com/typekit/webfontloader

  var completer = new Completer();
  var googleFontFamilies = ['Poller One', 'Titillium Web:900', 'Parisienne',
                            'Varela Round', 'Poly', 'Ceviche One', 'Press Start 2P',
                            'Norican', 'Yanone Kaffeesatz', 'VT323'];

  js.JsObject webFont = js.context["WebFont"];
  js.JsObject webFontConfig = new js.JsObject.jsify({
    "google": {
      "families": googleFontFamilies
    },
    "typekit": {
      "id": "sdo1idp"
    },
    "loading": () => print("loading"),
    "active": () => completer.complete(null),
    "inactive": () => completer.completeError("Error loading fonts"),
    "fontloading": (familyName, fvd) => print("fontloading: $familyName, $fvd"),
    "fontactive": (familyName, fvd) => print("fontactive: $familyName, $fvd"),
    "fontinactive": (familyName, fvd) => print("fontinactive: $familyName, $fvd")
  });

  webFont.callMethod("load", [webFontConfig]);
  completer.future.then((_) {
    showText("'Ceviche One'", "Google Font: Ceviche One", 0);
    showText("cabazon", "TypeKit: cabazon", 80);

  });
}

void showText(String fontFamily, String text, int y) {
  var textField = new TextField(text);
  textField.autoSize = TextFieldAutoSize.LEFT;
  textField.defaultTextFormat = new TextFormat(fontFamily, 60, Color.Black);
  textField.y = y;
  textField.addTo(stage);
}

[bp74]

I think i have found a workaround for the IE issue, at least it works on my PC. But the workaround is really strange and i don't have an explanation for it. The only thing i can imagine is a serious bug in the IE JavaScript engine. Please try it on your PC and Internet Explorer:

http://www.stagexl.org/samples/text_field/index.html

The workaround is this:

canvasContext.font = fontStyle + " "; // IE workaround

After adding a space the fonts are correctly shown. But the space needs to be added right at the assignment of the canvas context font. If the space is added to the fontStyle variable or inside of the TextFormat getter it does not work.

[xvrh]

Hello Bernhard, It works perfectly on my machine too (windows 8/IE 11) :+1:

This is a really great (and weird) discovery. Nice work.

[bp74]

I think we can close this old issue, the fonts looks okay now (except some minor issus in Chrome in rare cases). Unfortunately there isn't much we can do about it.