1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default Text Alignment Issue?

    Text Alignment Issue?


    Hello,

    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:

    @font-face
    {
    font-family:"Tungsten Medium";
    src: url(assets/Tungsten-Medium.ttf);
    }

    2. Position rectangle and upper-case type to be aligned in Sencha.
    3. Press ctrl + enter to preview in Internet Explorer.

    ---

    14-1620_TextAlignment_CA_v01a.png

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    246
    Vote Rating
    22
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default


    Hey Miro,

    - 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

  4. #4
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    246
    Vote Rating
    22
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    Is adjustment of line-height having no effect in IE?

  5. #5
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default


    No, sadly it is not.

    I forgot to mention it, but I did adjust the line-height property to 70% as well.

  6. #6
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    246
    Vote Rating
    22
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    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).

  7. #7
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default


    Yes... I was afraid that would be the case. Well, thank you for investigating the issue, I appreciate it.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."