FLUID-6204: Implement a letter spacing enactor and adjuster

Metadata

Source
FLUID-6204
Type
Task
Priority
Major
Status
Closed
Resolution
Fixed
Assignee
Justin Obara
Reporter
Justin Obara
Created
2017-09-28T13:30:18.365-0400
Updated
2018-03-12T14:43:36.131-0400
Versions
N/A
Fixed Versions
  1. 3.0
Component
  1. Prefs Framework

Description

As part of the work on UIO+ we need a character/letter spacing adjuster/enactor. This should be similar to how the text size and line spacing adjusters/enactors work, but will adjust the space between the characters.

This should be possible to do using the "letter-spacing" css style.

Comments

  • Justin Obara commented 2017-09-28T13:32:49.449-0400

    Based on https://files.inclusivedesign.ca/index.php/apps/files/?dir=/IDRC-Design/Typography&fileid=22233#pdfviewer it seems that in phototypesetting letterspacing is determined by units. A unit is based on the em.

  • Justin Obara commented 2017-10-03T16:35:03.107-0400

    Talked with Caren, Dana, Lisa, Jon, and Sepideh about line spacing to determine the following:

    • What are the increments?
    • What is the range?
    • What is the best interaction?

    Summary of feedback:

    • Possibly use discreet increments such as "regular, small, medium, large"
    • Have negative values to make letters closer
    • Potentially need to modify linespace and workspace along with character space to keep it readable
    • Should use "em" instead of "px" to set letter spacing to account for differences in font size
    • Need more research into the need for character/letter spacing.
    • Looked at illustrator, indesign, and word to see how they set letter spacing
    • Regarding interaction:
      • are the values meaningful? would a simple slider or +/- buttons be enough
      • would discreet increments paired with a class name make it easier for integrators who may have already set letter spacing for certain portions of the site?

  • Justin Obara commented 2017-10-04T09:53:07.731-0400

    In my research so far, there is no specific mention of specific values or combinations that are recommended. The guidelines tend to be more general and recommend against crowding. There are also some recommendations against having too many gaps or uneven spaces as it can make reading harder, especially for those with dyslexia.

    Below are some resources that Julia passed along from her Google search:

  • Justin Obara commented 2017-10-31T09:50:54.125-0400

    Suggestions from APCP UX team

    https://wiki.gpii.net/w/Browser_Adaptation_Design_Research#Character_Spacing

  • Justin Obara commented 2018-01-11T16:57:49.044-0500

    Should look at https://www.w3.org/International/ for any advice on internationalization issues. For example some languages like farsi may not make sense if letter spacing is applied.

  • Cindy Li commented 2018-03-12T14:43:31.938-0400

    The pull request has been merged into the project repo master branch at e4d2974d22938cc20a2157f5fd687486fec15024.