Eliding text in Altia Design 12

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:

https://altia.zendesk.com/hc/en-us/articles/115000033344-How-to-elide-text-with-an-ellipsis-if-the-text-string-is-too-long-

 

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_countmax_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!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.