- Qt 5.5
- Qt Quick
- Qt Quick Examples - Right to Left
- textalignment.qml Example File
- Qt 5.5.1 Reference Documentation

# textalignment.qml Example File

righttoleft/textalignment/textalignment.qml

    /****************************************************************************
    **
    ** Copyright (C) 2015 The Qt Company Ltd.
    ** Contact: http://www.qt.io/licensing/
    **
    ** This file is part of the examples of the Qt Toolkit.
    **
    ** $QT_BEGIN_LICENSE:BSD$
    ** You may use this file under the terms of the BSD license as follows:
    **
    ** "Redistribution and use in source and binary forms, with or without
    ** modification, are permitted provided that the following conditions are
    ** met:
    **   * Redistributions of source code must retain the above copyright
    **     notice, this list of conditions and the following disclaimer.
    **   * Redistributions in binary form must reproduce the above copyright
    **     notice, this list of conditions and the following disclaimer in
    **     the documentation and/or other materials provided with the
    **     distribution.
    **   * Neither the name of The Qt Company Ltd nor the names of its
    **     contributors may be used to endorse or promote products derived
    **     from this software without specific prior written permission.
    **
    **
    ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
    ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
    ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
    ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
    ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
    ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
    ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
    ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
    ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
    ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
    ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
    **
    ** $QT_END_LICENSE$
    **
    ****************************************************************************/

    import QtQuick 2.0

    Rectangle {
        id: root
        color: "white"
        //width: containerColumn.width
        //height: containerColumn.height + containerColumn.anchors.topMargin
        width: 320
        height: 480

        property bool mirror: false
        property int pxSz: 18
        property variant horizontalAlignment: undefined

        property variant editorType: ["Plain Text", "Styled Text", "Plain Rich Text", "Italic Rich Text", "Plain TextEdit", "Italic TextEdit", "TextInput"]
        property variant text: ["", " ", "Hello world!", "مرحبا العالم!", "Hello world! Hello!\nHello world! Hello!", "مرحبا العالم! مرحبا! مرحبا العالم! مرحبا!" ,"مرحبا العالم! مرحبا! مرحبا Hello world!\nالعالم! مرحبا!"]
        property variant description: ["empty text", "white-space-only text", "left-to-right text", "right-to-left text", "multi-line left-to-right text", "multi-line right-to-left text", "multi-line bidi text"]
        property variant textComponents: [plainTextComponent, styledTextComponent, richTextComponent, italicRichTextComponent, plainTextEdit, italicTextEdit, textInput]

        function shortText(horizontalAlignment) {

            // all the different QML editors have
            // the same alignment values
            switch (horizontalAlignment) {
            case Text.AlignLeft:
                return "L";
            case Text.AlignRight:
                return "R";
            case Text.AlignHCenter:
                return "C";
            case Text.AlignJustify:
                return "J";
            default:
                return "Error";
            }
        }
        Column {
            id: containerColumn
            spacing: 10
            width: editorTypeRow.width
            anchors { top: parent.top; topMargin: 5 }
            ListView {
                width: 320
                height: 320
                id: editorTypeRow
                model: editorType.length
                orientation: ListView.Horizontal
                cacheBuffer: 1000//Load the really expensive ones async if possible
                delegate: Item {
                    width: editorColumn.width
                    height: editorColumn.height
                    Column {
                        id: editorColumn
                        spacing: 5
                        width: textColumn.width+10
                        Text {
                            text: root.editorType[index]
                            font.pixelSize: 16
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Column {
                            id: textColumn
                            spacing: 5
                            anchors.horizontalCenter: parent.horizontalCenter
                            Repeater {
                                model: textComponents.length
                                delegate: textComponents[index]
                            }
                        }
                    }
                }
            }
            Column {
                spacing: 2
                width: parent.width
                Rectangle {
                    // button
                    height: 50; width: parent.width
                    color: mouseArea.pressed ? "black" : "lightgray"
                    Column {
                        anchors.centerIn: parent
                        Text {
                            text: root.mirror ? "Mirrored" : "Not mirrored"
                            color: "white"
                            font.pixelSize: 16
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text {
                            text: "(click here to toggle)"
                            color: "white"
                            font.pixelSize: 10
                            font.italic: true
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                    MouseArea {
                        id: mouseArea
                        property int index: 0
                        anchors.fill: parent
                        onClicked: root.mirror = !root.mirror
                    }
                }
                Rectangle {
                    // button
                    height: 50; width: parent.width
                    color: mouseArea2.pressed ? "black" : "gray"
                    Column {
                        anchors.centerIn: parent
                        Text {
                            text: {
                                if (root.horizontalAlignment == undefined)
                                    return "Implict alignment";
                                switch (root.horizontalAlignment) {
                                case Text.AlignLeft:
                                    return "Left alignment";
                                case Text.AlignRight:
                                    return "Right alignment";
                                case Text.AlignHCenter:
                                    return "Center alignment";
                                case Text.AlignJustify:
                                    return "Justify alignment";
                                }
                            }
                            color: "white"
                            font.pixelSize: 16
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text {
                            text: "(click here to toggle)"
                            color: "white"
                            font.pixelSize: 10
                            font.italic: true
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                    MouseArea {
                        id: mouseArea2
                        property int index: 0
                        anchors.fill: parent
                        onClicked: {
                            if (index < 0) {
                                root.horizontalAlignment = undefined;
                            } else {
                                root.horizontalAlignment = Math.pow(2, index);
                            }
                            index = (index + 2) % 5 - 1;
                        }
                    }
                }
            }
        }

        Component {
            id: plainTextComponent
            Text {
                width: 180
                text: root.text[index]
                font.pixelSize: pxSz
                wrapMode: Text.WordWrap
                horizontalAlignment: root.horizontalAlignment
                LayoutMirroring.enabled: root.mirror
                textFormat: Text.RichText
                Rectangle {
                    z: -1
                    color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
                    anchors.fill: parent
                }
                Text {
                    text: root.description[index]
                    color: Qt.rgba(1,1,1,1.0)
                    anchors.centerIn: parent
                    font.pixelSize: pxSz - 2
                    Rectangle {
                        z: -1
                        color: Qt.rgba(0.3, 0, 0, 0.3)
                        anchors { fill: parent; margins: -3 }
                    }
                }
                Text {
                    color: "white"
                    text: shortText(parent.horizontalAlignment)
                    anchors { top: parent.top; right: parent.right; margins: 2 }
                }
            }
        }

        Component {
            id: styledTextComponent
            Text {
                width: 180
                text: root.text[index]
                font.pixelSize: pxSz
                wrapMode: Text.WordWrap
                horizontalAlignment: root.horizontalAlignment
                LayoutMirroring.enabled: root.mirror
                textFormat: Text.RichText
                style: Text.Sunken
                styleColor: "white"
                Rectangle {
                    z: -1
                    color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
                    anchors.fill: parent
                }
                Text {
                    text: root.description[index]
                    color: Qt.rgba(1,1,1,1.0)
                    anchors.centerIn: parent
                    font.pixelSize: pxSz - 2
                    Rectangle {
                        z: -1
                        color: Qt.rgba(0.3, 0, 0, 0.3)
                        anchors { fill: parent; margins: -3 }
                    }
                }
                Text {
                    color: "white"
                    text: shortText(parent.horizontalAlignment)
                    anchors { top: parent.top; right: parent.right; margins: 2 }
                }
            }
        }

        Component {
            id: richTextComponent
            Text {
                width: 180
                text: root.text[index]
                font.pixelSize: pxSz
                wrapMode: Text.WordWrap
                horizontalAlignment: root.horizontalAlignment
                LayoutMirroring.enabled: root.mirror
                textFormat: Text.RichText
                Rectangle {
                    z: -1
                    color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
                    anchors.fill: parent
                }
                Text {
                    text: root.description[index]
                    color: Qt.rgba(1,1,1,1.0)
                    anchors.centerIn: parent
                    font.pixelSize: pxSz - 2
                    Rectangle {
                        z: -1
                        color: Qt.rgba(0.3, 0, 0, 0.3)
                        anchors { fill: parent; margins: -3 }
                    }
                }
                Text {
                    color: "white"
                    text: shortText(parent.horizontalAlignment)
                    anchors { top: parent.top; right: parent.right; margins: 2 }
                }
            }
        }

        Component {
            id: italicRichTextComponent
            Text {
                width: 180
                text: "<i>" + root.text[index] + "</i>"
                font.pixelSize: pxSz
                wrapMode: Text.WordWrap
                horizontalAlignment: root.horizontalAlignment
                LayoutMirroring.enabled: root.mirror
                textFormat: Text.RichText
                property variant backgroundColor: Qt.rgba(0.8, 0.2, 0.2, 0.3)
                Rectangle {
                    z: -1
                    color: parent.backgroundColor
                    anchors.fill: parent
                }
                Text {
                    text: root.description[index]
                    color: Qt.rgba(1,1,1,1.0)
                    anchors.centerIn: parent
                    font.pixelSize: pxSz - 2
                    Rectangle {
                        z: -1
                        color: Qt.rgba(0.3, 0, 0, 0.3)
                        anchors { fill: parent; margins: -3 }
                    }
                }
                Text {
                    color: "white"
                    text: shortText(parent.horizontalAlignment)
                    anchors { top: parent.top; right: parent.right; margins: 2 }
                }
            }
        }

        Component {
            id: plainTextEdit
            TextEdit {
                width: 180
                text: root.text[index]
                font.pixelSize: pxSz
                cursorVisible: true
                wrapMode: TextEdit.WordWrap
                horizontalAlignment: root.horizontalAlignment
                LayoutMirroring.enabled: root.mirror
                Rectangle {
                    z: -1
                    color: Qt.rgba(0.5, 0.5, 0.2, 0.3)
                    anchors.fill: parent
                }
                Text {
                    text: root.description[index]
                    color: Qt.rgba(1,1,1,1.0)
                    anchors.centerIn: parent
                    font.pixelSize: pxSz - 2
                    Rectangle {
                        z: -1
                        color: Qt.rgba(0.3, 0, 0, 0.3)
                        anchors { fill: parent; margins: -3 }
                    }
                }
                Text {
                    color: "white"
                    text: shortText(parent.horizontalAlignment)
                    anchors { top: parent.top; right: parent.right; margins: 2 }
                }
            }
        }

        Component {
            id: italicTextEdit
            TextEdit {
                width: 180
                text: "<i>" + root.text[index] + "<i>"
                font.pixelSize: pxSz
                cursorVisible: true
                wrapMode: TextEdit.WordWrap
                textFormat: TextEdit.RichText
                horizontalAlignment: root.horizontalAlignment
                LayoutMirroring.enabled: root.mirror
                Rectangle {
                    z: -1
                    color: Qt.rgba(0.5, 0.5, 0.2, 0.3)
                    anchors.fill: parent
                }
                Text {
                    text: root.description[index]
                    color: Qt.rgba(1,1,1,1.0)
                    anchors.centerIn: parent
                    font.pixelSize: pxSz - 2
                    Rectangle {
                        z: -1
                        color: Qt.rgba(0.3, 0, 0, 0.3)
                        anchors { fill: parent; margins: -3 }
                    }
                }
                Text {
                    color: "white"
                    text: shortText(parent.horizontalAlignment)
                    anchors { top: parent.top; right: parent.right; margins: 2 }
                }
            }
        }

        Component {
            id: textInput
            Item {
                width: 180
                height: textInput.text.length > 20 ? 3*textInput.height : textInput.height
                TextInput {
                    id: textInput
                    width: 180
                    text: root.text[index]
                    font.pixelSize: pxSz
                    cursorVisible: true
                    horizontalAlignment: root.horizontalAlignment
                    LayoutMirroring.enabled: root.mirror
                    Rectangle {
                        z: -1
                        color: Qt.rgba(0.6, 0.4, 0.2, 0.3)
                        anchors.fill: parent
                    }
                    Text {
                        text: root.description[index]
                        color: Qt.rgba(1,1,1,1.0)
                        anchors.centerIn: parent
                        font.pixelSize: pxSz - 2
                        Rectangle {
                            z: -1
                            color: Qt.rgba(0.3, 0, 0, 0.3)
                            anchors { fill: parent; margins: -3 }
                        }
                    }
                    Text {
                        color: "white"
                        text: shortText(parent.horizontalAlignment)
                        anchors { top: parent.top; right: parent.right; margins: 2 }
                    }
                }
            }
        }
    }