Text IN CENTER!/Forum (SoCoder)

Forum Home

Concept/Design

Text IN CENTER!

User

Message

Posted : Thursday, 27 October 2011, 15:25 | Permalink | Mark Here

Afr0

WW Entries : 3

Does anyone have a bulletproof mathematical/algorithmical approach for centering text against a component (say, a button) given the component's x, y, width, height and the text's width and height? I obviously don't know the text's x and y, as those are the parameters I'm trying to figure out... I want them to be centered! ----- Afr0 Games Project Dollhouse on Github - Please fork!

Posted : Thursday, 27 October 2011, 15:34 | Permalink | Mark Here

HoboBen

WW Entries : 9

Off the top of my head... (untested)

function text(txt, x, y, w, h)
{
  textw = CalculateTextW(txt);
  texth = CalculateTextH(txt);

  textx = x + ((w - textw) / 2);
  texty = y + ((h - texth) / 2);

  DrawText(txt, textx, texty);
}

-->

To explain, take
textx = x + ((w - textw) / 2);

The x being the offset of the component is simple. We can effectively ignore this for now by pretending it's zero, leaving:

text = (w - textw) / 2;

This is
w/2 (the mid-point of the component)

Subtracted by
textw/2 (half the graphical length of the string)

Which will centre it about the mid point.

Which simplifies to (w/2) - (textw/2) = ((w - textw)/2)

-----

github

Posted : Thursday, 27 October 2011, 16:11 | Permalink | Mark Here

JL235

WW Entries : 7

I believe Ben's answer is right (although I've not run it).

But bear in mind that you can't centre text just using it's pixel height. The problem is that certain characters are meant to extend way up or below, and so become out of place.

Essentially, the centre of a character is probably not half it's height in pixels.

This image from the W3 Spec on HTML5 Canvas is a good illustration of what I mean:

-----
PlayMyCode.com - build and play in your browser, Blog, Twitter.

Posted : Thursday, 27 October 2011, 20:49 | Permalink | Mark Here

Afr0

WW Entries : 3

Well I'm using Comic Sans for rendering fonts (as that is more or less what the original TSO used), and I'm also not mixing uppercase and lowercase letters right now (as that would require rendering two different fonts at the same time for the desired effect), so I should be relatively fine. Thanks Hobo! ----- Afr0 Games Project Dollhouse on Github - Please fork!

Posted : Friday, 28 October 2011, 04:36 | Permalink | Mark Here

spinal

Comic Sans!!!!!!!!!!!!!!!!!!!!1111111111111111111 The entire world should have already told you not to use comic sans for anything ever!! Does whatever language you're using not support centered text already? ----- 3DS - 1762-2660-3218

Posted : Friday, 28 October 2011, 05:42 | Permalink | Mark Here

Afr0

WW Entries : 3

I know Comic Sans isn't a very popular font, but it worked nicely for The Sims and TSO. Yes, the SpriteFont class in XNA has a MeasureString() function, but I still needed to wrap my head around the maths. ----- Afr0 Games Project Dollhouse on Github - Please fork!

Posted : Friday, 28 October 2011, 05:54 | Permalink | Mark Here

spinal

I would only worry about centring the width, keep the hight exactly the same for all button text, it will look out of place otherwise. ----- 3DS - 1762-2660-3218

Posted : Friday, 10 August 2012, 12:45 | Permalink | Mark Here

Afr0

WW Entries : 3

Ugh.... somehow I managed to mess this up again when putting scaling into the mix!

My code:

            if (!Invisible)
            {
                float GlobalScale = GlobalSettings.Default.ScaleFactor;

                if (m_ScaleX == 0 && m_ScaleY == 0)
                {
                    //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right
                    //value is returned.
                    SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height), 
                        Color.White, 0.0f, new Vector2(0.0f, 0.0f), GlobalScale, SpriteEffects.None, 0.0f);

                    if (m_Caption != null)
                    {
                        Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption);
                        CaptionSize.X += GlobalScale;
                        CaptionSize.Y += GlobalScale;
                        float ButtonWidth = (m_Width * GlobalScale) * GlobalScale;
                        float ButtonHeight = (m_Texture.Height * GlobalScale) * GlobalScale;

                        SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption,
                            new Vector2((m_X + ((ButtonWidth - (CaptionSize.X / 0.7f)) * GlobalScale)), 
                                (m_Y + (ButtonHeight - (CaptionSize.Y / 2)) * GlobalScale)), Color.Wheat);
                    }
                }
                else
                {
                    //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right
                    //value is returned.
                    SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height),
                        Color.White, 0.0f, new Vector2(0.0f, 0.0f), new Vector2(m_ScaleX + GlobalScale, m_ScaleY + GlobalScale), 
                        SpriteEffects.None, 0.0f);

                    if (m_Caption != null)
                    {
                        Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption);
                        CaptionSize.X += GlobalScale;
                        CaptionSize.Y += GlobalScale;
                        float ButtonWidth = ((m_Width * GlobalScale) + m_ScaleX) * GlobalScale;
                        float ButtonHeight = ((m_Texture.Height * GlobalScale) + m_ScaleY) * GlobalScale;

                        SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption,
                            new Vector2(m_X + (ButtonWidth - (CaptionSize.X / 0.7f)) * GlobalScale,
                                m_Y + (ButtonHeight - (CaptionSize.Y / 2)) * GlobalScale), Color.Wheat);
                    }
                }
            }

-->

This works for some buttons (where ScaleX and ScaleY is 0), but not for others!
Please keep in mind that GlobalScale is the global scalefactor (I.E the result of the current resolution's width by 800), and ScaleX and ScaleY is the button's individual scalefactor.

Any tips or hints are greatly appreciated!

-----
Afr0 Games

Project Dollhouse on Github - Please fork!

Posted : Sunday, 12 August 2012, 18:15 | Permalink | Mark Here

dna

The code you wrote works ben. There just needs to be some conversion for txt. Using Stringwidth(txt) somewhere inside of CalculateTextW(txt) should do it. Than you would have both the x and textw in the same terms, pixels. ----- DNA

Posted : Monday, 13 August 2012, 01:30 | Permalink | Mark Here

Afr0

WW Entries : 3

I'm aware that Hobo's code works, but I made my equation a little more difficult by throwing scaling into the mix...

I made it work last night, it turned out I had my braces messed up;

                float GlobalScale = GlobalSettings.Default.ScaleFactor;

                if (m_ScaleX == 0 && m_ScaleY == 0)
                {
                    //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right
                    //value is returned.
                    SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height), 
                        Color.White, 0.0f, new Vector2(0.0f, 0.0f), GlobalScale, SpriteEffects.None, 0.0f);

                    if (m_Caption != null)
                    {
                        Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption);
                        CaptionSize.X += GlobalScale;
                        CaptionSize.Y += GlobalScale;
                        float ButtonWidth = m_Width * GlobalScale;
                        float ButtonHeight = m_Texture.Height * GlobalScale;

                        SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption,
                            new Vector2(m_X + (((ButtonWidth - CaptionSize.X) / 2.1f) * GlobalScale), 
                                m_Y + ((ButtonHeight - CaptionSize.Y) / 2) * GlobalScale), Color.Wheat);
                    }
                }
                else
                {
                    //WARNING: Do NOT refer to m_CurrentFrame, as the accessor ensures the right
                    //value is returned.
                    SBatch.Draw(m_Texture, new Vector2(m_X * GlobalScale, m_Y * GlobalScale), new Rectangle(CurrentFrame, 0, m_Width, m_Texture.Height),
                        Color.White, 0.0f, new Vector2(0.0f, 0.0f), new Vector2(m_ScaleX + GlobalScale, m_ScaleY + GlobalScale), 
                        SpriteEffects.None, 0.0f);

                    if (m_Caption != null)
                    {
                        Vector2 CaptionSize = m_Screen.ScreenMgr.SprFontSmall.MeasureString(m_Caption);
                        CaptionSize.X += GlobalScale;
                        CaptionSize.Y += GlobalScale;
                        float ButtonWidth = m_Width * (GlobalScale + m_ScaleX);
                        float ButtonHeight = m_Texture.Height * (GlobalScale + m_ScaleY);

                        SBatch.DrawString(m_Screen.ScreenMgr.SprFontSmall, m_Caption,
                            new Vector2(m_X + ((ButtonWidth - CaptionSize.X) / 2.1f) * GlobalScale,
                                m_Y + ((ButtonHeight - CaptionSize.Y) / 2) * GlobalScale), Color.Wheat);
                    }
                }

-->

To explain, I had;

                        float ButtonWidth = (m_Width * GlobalScale) + m_ScaleX;
                        float ButtonHeight = (m_Texture.Height * GlobalScale) + m_ScaleY;

-->

It's amazing what a couple of braces can do!

-----
Afr0 Games

Project Dollhouse on Github - Please fork!