mattbrand Posted January 19, 2017 Share Posted January 19, 2017 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? Link to comment Share on other sites More sharing options...
samme Posted January 19, 2017 Share Posted January 19, 2017 boundsAlignV should be middle, but you must also use text.setTextBounds(0, 0, width, height) Otherwise there's no context for the alignment. Link to comment Share on other sites More sharing options...
ForgeableSum Posted January 19, 2017 Share Posted January 19, 2017 I can't see why anyone would use canvas for UI, when they could just as easily use plain HTML/CSS. phreaknation and mattstyles 2 Link to comment Share on other sites More sharing options...
mattbrand Posted January 19, 2017 Author Share Posted January 19, 2017 Awesome thank you @samme! Link to comment Share on other sites More sharing options...
phreaknation Posted January 19, 2017 Share Posted January 19, 2017 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 mattstyles 1 Link to comment Share on other sites More sharing options...
ForgeableSum Posted January 20, 2017 Share Posted January 20, 2017 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. Link to comment Share on other sites More sharing options...
phreaknation Posted January 22, 2017 Share Posted January 22, 2017 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. Link to comment Share on other sites More sharing options...
ForgeableSum Posted January 30, 2017 Share Posted January 30, 2017 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." Link to comment Share on other sites More sharing options...
phreaknation Posted January 30, 2017 Share Posted January 30, 2017 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 Link to comment Share on other sites More sharing options...
Anahit DEV Posted June 16, 2017 Share Posted June 16, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts