NOTE: Please use this article only if you are using Altia Design 12 and newer. For Altia Design 11.4 and older, elide was not built-in natively supported, but a method for elide is described in this older KB article linked below:
Altia Design 12 and DeepScreen 10 add the ability elide text I/Os. Eliding is useful for constraining text I/Os. This new feature allows eliding text on the left, right, or middle with a configurable elide character. This is similar to the text-overflow: ellipsis
setting in CSS with more configuration possibilities.
To specify the desired width of the text I/O, the existing max_pixel_count
, max_char_count
, and clip_on
animations are used. The two new animations to control elide are elide_mode
and elide_char
.
elide_mode
has the following values:
- 0 - no elide
- 1 - elide automatic (selected based on
justify_mode
) - 2 - elide left
- 3 - elide center
- 4 - elide right
elide_char
specifies which character to display when the string is elided. If this is set to 0, no elide character is displayed but the string is still elided to allow truncation behavior.
Let's consider the string "The quick brown fox jumps over the lazy dog" in Helvetica at 18 point. This has a width of 471 pixels in Altia Design:
If max_pixel_count
is set to 200 and elide_mode
is set to 1 (auto):
Next, if elide_mode
is changed to 2 (left) and elide_char
to 0, the string will be truncated from the left:
Finally, if elide_mode is changed to 3 (center) and elide_char is set back to an ellipsis, the string will display as:
Elide center is especially useful for displaying filenames or URLs:
Elide with text shaping
You may have legacy code that implements an elide algorithm on a logical input string before sending text to an Altia text I/O. While this is will work correctly for many scripts, such as Latin or CJK, it will not work correctly on shaped, bi-directional scripts. Altia's new elide animations should be used instead since they can handle shaped and bi-directional text correctly.
For example, consider the following Arabic logical input string. The Unicode code points are shown as they would be stored in the character array sent to Altia (the null terminator is omitted):
Glyph | |||||||||||
Code | 0627 | 0644 | 0639 | 0631 | 0628 | 064A | 0629 | 0031 | 0032 | 0033 | 0034 |
Index | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Arabic is written from right-to-left, however, the numerals in Arabic are written left-to-right. The bi-directional algorithm in an Altia font module will take care of this. Each Arabic letter has 4 forms: isolated (shown in the table above), initial, medial, and final. The shaping engine in the Altia font module selects the proper glyph. The final shaped string is shown below in Altia Design when shaping is on:
This text I/O is 153 pixels wide. If we want to constrain it to a width of 80 pixels with elide left, it will look like this:
Constraining to 140 pixels will look like this:
If you instead attempted to implement elide yourself by truncating the logical input string to indices [0,2] and append a horizontal ellipsis character, the output is wrong:
Notice how the code point U+0639 (Arabic letter ain) has changed from medial to final form.
Showing the final example, take logical indices [0,7] and append an ellipsis results in:
Notice how the numerals displayed are incorrect - the number's meaning has has changed since it is now showing the most significant digit instead of least significant digit!