20 Jun 2014 1:41 PM #1
Text Alignment Issue?
Text Alignment Issue?
Is there a known issue with custom fonts becoming misaligned between the in-software preview (the way it looks on the canvas), and external previews (pressing ctrl + enter to preview in Internet Explorer)?
Here's my workflow if this helps to clarify what I'm asking. Attached below are also screenshots of the misalignment issue:
1. Install a custom font by placing it in my assets folder, using the following CSS code to connect it to Sencha:
2. Position rectangle and upper-case type to be aligned in Sencha.
3. Press ctrl + enter to preview in Internet Explorer.
20 Jun 2014 2:38 PM #2
A few things that come to mind:
- Are you using IE10+ ? (I'm assuming yes - Animator doesn't support older versions of IE) - Is the preview rendering correctly when you preview it in Chrome / Firefox / Safari?
- Is the bounding box of the text large enough to contain the text? It could be that the default behavior of how the text is aligned inside its container is different for IE and webkit based browsers (preview inside Animator is rendered based on webkit). If the bounding box is too small, make sure that it is large enough so that the text is not overflowing outside on either bottom or top of it.
- You should align the top of the text container to the object you want to align to instead of actual text. Try setting the property line-height to 70% after that.
20 Jun 2014 3:26 PM #3
- Yes, I am using IE 11+
- The bounding box is indeed large enough to contain the text, below is a screenshot of that.
- I aligned to the top of the text container instead of the text itself.
- When I preview in Firefox, the text is fine! But sadly, I need to deploy for IE...
Screen Shot 2014-06-20 at 4.20.24 PM.jpg
20 Jun 2014 3:34 PM #4
Is adjustment of line-height having no effect in IE?
20 Jun 2014 3:36 PM #5
No, sadly it is not.
I forgot to mention it, but I did adjust the line-height property to 70% as well.
20 Jun 2014 3:57 PM #6
I did some testing with standard and Google fonts and it seems I can reproduce the problem for some fonts, but even then the difference would be 1-2 pixels, and not a big gap like in your screenshot. For most fonts however it seemed to work fine.
It seems to me that this is an issue of browsers being liberal in how they interpret the font information when importing it. Could you verify it with other fonts?
If that doesn't solve it, and you only need to deploy on IE, I would recommend adding some padding on top of the text container to compensate, or if you are creating a header/title, create an image (that is a lighter solution than loading a font).
20 Jun 2014 4:50 PM #7
Yes... I was afraid that would be the case. Well, thank you for investigating the issue, I appreciate it.