Fix width label with dynamic font size

Question

Is there a way in cascades to get font size for a given text and fixed width?

I was trying with:

TextField{
  autoFit: TextAutoFit.FitToBounds
}

But the text always appear left align. The requirement is to center align text with variable font size label render in fixed rect.

score 1 · Answer 1 · answered Jul 17 '13 at 01:29

If you want just to center align text, you'd need to use textStyle.textAlign property like that:

textStyle.textAlign: TextAlign.Center

In order to center align text with variable font size label render in fixed rect, you basically need to specify the desired width and height of that rectangle for a Label use textStyle.textAlign property mentioned above and choose the font size via respective textStyle.fontSize Label property. Text aligning will be done by Cascades automatically (of course, if your text couldn't be fit in specified width/height it'd be cut off):

import bb.cascades 1.0

Page {
    Container {
        layout: DockLayout {}
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        Label {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            maxWidth: 300
            minWidth: maxWidth
            maxHeight: 100
            minHeight: maxHeight
            multiline: true
            text: "Some very very very very very long text here"
            textStyle.textAlign: TextAlign.Center
            textStyle.fontSize: FontSize.XLarge
        }
    }
}

I'd recommend this approach for achieving the goal set.

However, if you really want to get absolute values of font being used in a widget, use textStyle.fontSize property for this (TextStyle official documentation).

Thanks for the reply, but the label should reduce the font size for "very very long text" to fit the content. Also "textStyle.fontSize" will always give back the font size which was set while creating the widget. — Shailesh, Jul 17 '13 at 07:13
Ugg. Sorry for misclick. I didn't mean to downvote, Sunseeker. Too late to undo when I saw it. — Ross Rogers, Nov 25 '15 at 17:49

score 0 · Answer 2 · answered Jul 23 '13 at 14:36

There are no font metrics in BB10 Cascades at the moment so you won't be able to find out if the font does not fit in the label and resize it.

You can use sort of hack with layoutUpdateHandler to get some rough resizing, but I wouldn't recommend it. If the text changes frequently you will see flickering, but if it's only set once then it might be okay. Change the text set in "onCreationCompleted" to see if the text resizes for you.

    Container {
        id: root
        implicitLayoutAnimationsEnabled: false 

        background: Color.Cyan
        property int width: 500
        property string  text: ""
        property double textSize: 20
        layout: DockLayout {
        }
        attachedObjects: [
            LayoutUpdateHandler {
                onLayoutFrameChanged: {
                    if (layoutFrame.width > root.width) {
                        root.textSize = root.textSize - 1
                    }
                }
            }
        ]
        Label {
            implicitLayoutAnimationsEnabled: false 
            maxWidth: root.width
            text: root.text
            textStyle {
                fontSize: FontSize.PointValue
                fontSizeValue: root.textSize
            }
        }
        Label {
            implicitLayoutAnimationsEnabled: false 
            text: root.text
            opacity: 0
            textStyle {
                fontSize: FontSize.PointValue
                fontSizeValue: root.textSize
            }

        }
        onCreationCompleted: {
            root.text = "Hello World AAAAAAAA"
        }
    }

Fix width label with dynamic font size

2 Answers2