Global definition for hyphens

[yceballost]

Goal

Keep consistency between all texts and components of Mística

Context

Info about hyphens

Text in Mística have the property to break words with hyphens. Hyphens is used to join words or parts of words when:

Avoiding excessive white spaces: If a word is not split and there is sufficient space at the end of a line, it could result in large white spaces between words instead of a uniform distribution. Splitting a word allows for a more efficient utilization of that space.

Maintaining visual consistency: Hyphenating words helps maintain visual consistency by preventing a line from having only a few words while the next one is completely filled. This facilitates readability and enhances the overall presentation of the text.

Hyphen definition in Mística

If the word does not fit in the width of the container, the hyphen appears

Current hyphen usage in Mística

• <Text> components in Mística have de property to use or not hyphens manually using hyphens="auto" / "manual"
• Some components always force the usage of hyphens
  • cards
  • tabs
  • lists

Impact

Consistency in the usage of hyphen

Discussion Questions

• Should we make default the usage of hyphen and not only in certains component?
• What happens with callout? Should the callout be used as well?
• Use hyphen always or never?

In my opinion, the hyphen behavior should be a global behavior, not only in certain components

Additional considerations

The definition explained in the context section has some incompatibility issues with some versions of browsers. In Firefox, it does not work in any version

Do you have a visual proposal?

https://tinyurl.com/ypjcmynb

[aweell]

From an offline discussion:

• We found the best option to make default the usage of hyphens across all text instances used in all Mística components.
• Since will be a system wide config, the callout texts will also be affected.
• We will avoid to make a global configuration to enable or disable hyphens since we consider the correct approach to use the locale dictionary to split words when they have a superior width than the width of their current line.