mattbrand

Align text to the center vertically

Recommended Posts

How do you vertically align text in the center?

I have a high score box that shows 5 scores listed vertically. I render the names using a dynamic font size - so depending on how wide the name is, the font size is bigger or smaller.

You can see in the attachment that if the name is very long with a very small font, the name looks like it is vertically aligned to the top. I want the text to be vertically centered.

I tried using boundsAlignV in the style of the font, but that didn't change anything:

var style = {font: "64px Knewave", fill: "#ffffff", boundsAlignH: "center", boundsAlignV: "center"};

Any other ideas?

Screen Shot 2017-01-19 at 9.21.03 AM.png

Share this post


Link to post
Share on other sites
30 minutes ago, feudalwars said:

I can't see why anyone would use canvas for UI, when they could just as easily use plain HTML/CSS. 

I have to agree with feudalwars. It would also be less intensive graphically to have everything done through HTML/CSS as well as have a clear separation between GUI and game. I have successfully done this as well. The major advantage is not having to render and display via canvas your GUI every frame and let it focus on the game aspect which would speed your game up and give you higher frames overall

Share this post


Link to post
Share on other sites
23 hours ago, phreaknation said:

I have to agree with feudalwars. It would also be less intensive graphically to have everything done through HTML/CSS as well as have a clear separation between GUI and game. I have successfully done this as well. The major advantage is not having to render and display via canvas your GUI every frame and let it focus on the game aspect which would speed your game up and give you higher frames overall

not to mention webgl is notoriously bad at rendering fonts. i've seen a single line of text cutting the framerate in half in webgl. 

The only advantage of having UI inside the canvas is that it does feel more integrated, and you don't have to worry about weird stuff like the browser giving blue highlights to UI elements when the player drags the pointer. You also have access to all of the special effects and animations the canvas is capable of.

Nonetheless, I think the pros of HTML/CSS outweigh the cons, by a long shot. 

 

 

Share this post


Link to post
Share on other sites
On 1/20/2017 at 3:12 PM, feudalwars said:

not to mention webgl is notoriously bad at rendering fonts. i've seen a single line of text cutting the framerate in half in webgl. 

The only advantage of having UI inside the canvas is that it does feel more integrated, and you don't have to worry about weird stuff like the browser giving blue highlights to UI elements when the player drags the pointer. You also have access to all of the special effects and animations the canvas is capable of.

Nonetheless, I think the pros of HTML/CSS outweigh the cons, by a long shot. 

 

 

You can elemental highlighting by disabling user select in css.

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari*/
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

Side note if you ever want allow click through on an element you can set the pointer event

.click-through {
    pointer-events: none;
}



Hopefully these help with qualms in GUI design in HTML/CSS with games.

Share this post


Link to post
Share on other sites
On 1/21/2017 at 9:41 PM, phreaknation said:

You can elemental highlighting by disabling user select in css.


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari*/
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

Side note if you ever want allow click through on an element you can set the pointer event


.click-through {
    pointer-events: none;
}



Hopefully these help with qualms in GUI design in HTML/CSS with games.

I use all of those hacks, extensively, except, in the back of my mind, I'm always thinking "these obscure CSS properties aren't going to work in every browser." 

Share this post


Link to post
Share on other sites
On 1/19/2017 at 9:26 PM, mattbrand said:

How do you vertically align text in the center?

I have a high score box that shows 5 scores listed vertically. I render the names using a dynamic font size - so depending on how wide the name is, the font size is bigger or smaller.

You can see in the attachment that if the name is very long with a very small font, the name looks like it is vertically aligned to the top. I want the text to be vertically centered.

I tried using boundsAlignV in the style of the font, but that didn't change anything:


var style = {font: "64px Knewave", fill: "#ffffff", boundsAlignH: "center", boundsAlignV: "center"};

Any other ideas?

Screen Shot 2017-01-19 at 9.21.03 AM.png

Hello,

Am trying to get this type of outlined box as you have above. Can you please help me with advise how you achieved this result?

Thanks in advance. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.