dougTesting.net : Winwheel.js tutorial: #6 Text Alignment and Orientation

Winwheel.js tutorial: #6 Text Alignment and Orientation

So far in the tutorials we have stuck with the default options for the segment text, but there are a number that give you control over the placement of it.

When trying to position text within the segments there are four things to understand:

textAlignment
textMargin
textOrientation
textDirection

These parameters can be set globally for the whole wheel, or individually for each segment.

Alignment

Alignment is what the text is aligned to, the default, which you have seen in the previous tutorials, is center, but there is also inner and outer.

Inner aligns the text towards the inside (center point) of the wheel, outer aligns the text towards the outer edge of the wheel, and center puts the text half way between the inside and outside of wheel as seen in these examples...

Inner Alignment:

'textAlignment' : 'inner'

Outer Alignment:

'textAlignment' : 'outer'

Center Alignment:

'textAlignment' : 'center'

    let innerWheel = new Winwheel({
        'numSegments'    : 6,
        'fillStyle'      : '#7de6ef',
        'textAlignment'  : 'inner',         // Set alignment: inner, outer, center.
        'segments'       :
        [
            {'text' : 'Segment 1'},
            {'text' : 'Segment 2'},
            {'text' : 'Segment 3'},
            {'text' : 'Segment 4'},
            {'text' : 'Segment 5'},
            {'text' : 'Segment 6'}
        ]
    });

Margin

Margin is used in conjunction with the alignment property to add a margin to the left or right side of the text.

You will probably want some margin when using the inner or outer textAlignment options. In fact some margin is included by default based on the global font size. This might look right, or you may need to adjust it.

Set the margin with the textMargin property. If you don't want any margin set it to 0.

Why is margin useful? Consider the following examples...

Inner Alignment, no margin:

'textAlignment' : 'inner',
'textMargin' : 0

Outer Alignment, no margin:

'textAlignment' : 'outer',
'textMargin' : 0

As you see when the inner alignment option is chosen, if the margin is 0 the text begins right in the center of the wheel making the start of it unreadable. Adding some margin pushes the text out from the center.

Also when the outer alignment is chosen and the margin is 0, the end of the text touches the outside of the wheel. Adding some margin pushes the text in from the outside by the specified number of pixels.

If you are wondering what happens with the margin when the textAlignment is center, it acts the same as the inner alignment by pushing the text away from the center of the wheel. Due to the optical effect of the centred text appearing closer to the inside of the wheel because the segments get smaller, it made sense to have the margin added on the inner side.

Note: when specifying the value for margin, do not include 'px' on the end of the value. Correct values are positive or negative numbers i.e. integers or decimals.

    let innerWheel = new Winwheel({
        'numSegments'    : 6,
        'fillStyle'      : '#7de6ef',
        'textAlignment'  : 'inner',
        'textMargin'     : 15,          // Specify text margin as a number.
        'segments'       :
        [
            {'text' : 'Segment 1'},
            {'text' : 'Segment 2'},
            {'text' : 'Segment 3'},
            {'text' : 'Segment 4'},
            {'text' : 'Segment 5'},
            {'text' : 'Segment 6'}
        ]
    });

Orientation

Orientation is used to control if the text is drawn horizontally, vertically, or if it is to follow the curve of the wheel using the curved option.

Horizontally (the default) means that text is drawn from left to right making the text in segments on the right half of the wheel the most readable. Vertically means that text will be drawn top downwards making the text in segments on the top half of the wheel the more readable (with the default text direction).

Horizontal Orientation:

'textOrientation' : 'horizontal'

Vertical Orientation:

'textOrientation' : 'vertical'

Note that the vertical orientation looks best when the text is upper-case and in a monospace font. Also note that it takes more room to render text vertically than horizontally so you may need to use a smaller font size than you would to fit the same text horizontally. Vertical code...

    let verticalWheel = new Winwheel({
        'numSegments'     : 8,
        'fillStyle'       : '#7de6ef',
        'textOrientation' : 'vertical',    // Set orientation. horizontal, vertical, curved.
        'textFontFamily'  : 'Courier',     // Monospace font best for vertical and curved.
        'textFontSize'    : 15,
        'segments'        :
        [
            {'text' : 'SEGMENT 1'},
            {'text' : 'SEGMENT 2'},
            {'text' : 'SEGMENT 3'},
            {'text' : 'SEGMENT 4'},
            {'text' : 'SEGMENT 5'},
            {'text' : 'SEGMENT 6'},
            {'text' : 'SEGMENT 7'},
            {'text' : 'SEGMENT 8'}
        ]
    });

Curved

The curved option draws the text following the curve (arc) of the wheel. The text looks best when a monospace font is used as there can appear to be extra gaps after thin letters like 'i' and 'l' when using a non-monospace font.

The textAlignment works as expected with curved orientation in that you can have curving text aligned to the inner, outer, or center of the wheel and a margin can be applied. The curved orientation really comes in handy when creating hollow wheels (doughnuts) as it may be the only orientation where the text will fit inside the segments.

Curved, Inner Aligned:

'textOrientation' : 'curved'
'textAligment' : 'inner'

Curved, Outer Aligned:

'textOrientation' : 'curved'
'textAligment' : 'outer'

Curved, Center Aligned:

'textOrientation' : 'curved'
'textAligment' : 'center'

Direction

Direction is used in conjunction with the orientation to get the text in segments on a particular side of the wheel the "right" way up. There are two options for textDirection, normal (default) and reversed.

Situations where you might want to reverse the textDirection is if you wanted the text on the left half of the wheel to be the right way up and readable from left to right instead of text in segments on the right half, or want to make it so that vertically aligned text in the bottom half of a wheel is readable top down.

In these examples the textDirection has been set to reversed. To see the difference, compare these with the Horizontal and Vertical orientation examples above.

Horizontal Orientation, direction reversed:

'textOrientation' : 'horizontal',
'textDirection' : 'reversed'

Vertical Orientation, direction reversed:

'textOrientation' : 'vertical',
'textDirection' : 'reversed'

    let directionReversed = new Winwheel({
        'numSegments'     : 8,
        'fillStyle'       : '#0B6184',
        'textOrientation' : 'horizontal',
        'textDirection'   : 'reversed',     // Set direction. normal (default) or reversed.
        'segments'        :
        [
            {'text' : 'Segment 1'},
            {'text' : 'Segment 2'},
            {'text' : 'Segment 3'},
            {'text' : 'Segment 4'},
            {'text' : 'Segment 5'},
            {'text' : 'Segment 6'},
            {'text' : 'Segment 7'},
            {'text' : 'Segment 8'}
        ]
    });

The reversed direction also causes curved text appear the other way up (as you would expect).

Additional Notes

The direction and orientation of the text on your winning wheel will probably be determined where the pointer indicating the prize is located. It would be a good idea to make it so the text underneath the pointer is readable left to right or top to bottom so the user does not have to try and read upside down to work out the prize they have won.

Previous:
< #5 Adding and Removing Segments

Next:
#7: Colours, Lines, and Fonts >