Align text to the center vertically

[mattbrand]

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?

[samme]

boundsAlignV should be middle, but you must also use

text.setTextBounds(0, 0, width, height)

Otherwise there's no context for the alignment.

[ForgeableSum]

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

[mattbrand]

Awesome thank you @samme!

[phreaknation]

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

[ForgeableSum]

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. 

 

 

[phreaknation]

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.

[ForgeableSum]

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

[phreaknation]

Lol, that's why I provided the caniuse links so you can see if they will fit into the scope of your project. Very handy website

[Anahit DEV]

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?

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.