Modeling Split-Style Labels and Headings

I'm working on a CMS design with text labels that look like:

SPECIAL
DEALS

BUY
NOW

ON-SITE
SPECIALS

PRODUCTS &
SERVICES

Pretty simple, right? How would you model this in Tridion?


Some options:

• Two fields for the "top" and bottom part
• One field, but with some "placeholder" to split the text into two parts (e.g. non-breaking space, a slash, semi-colon, etc). Template code will replace the "split" as needed.
• One rich text field
• Automatically, using CSS, JavaScript, and additional code if needed

The answer, of course, really depends on your requirements. But assuming a Tridion, multi-lingual implementation, also consider this text may:

• Display across channels and devices
• Be localized and translated possibly via managed translation
• Be read using assistive technologies (and should meet accessibility guidelines and practices)

So which options are a better fit now?

• Two fields for the "top" and bottom part This could work, but you lose the context of the phrase making this harder for translation.
One field, but with some "placeholder" to split the text in to (e.g. non-breaking space, a slash, semi-colon, etc). Will definitely work, but on the hackish side. Translators can be instructed to ignore the placeholder, but this leaves this baked in your managed content. Considering we might use mergefields like [[firstname]], it's not that bad.
• One rich text field.
• Automatically, using CSS, JavaScript, and additional code if needed Authors need control over which text is displayed differently, for example, "PRODUCTS & SERVICES" splits after the ampersand.

So if this is really rich text, should the text SPECIALS be bold or strong? Last I did accessibility research, I understood these where preferred in HTML:

• Divs over tables for layout
• Strong over bold for emphasizing words

But it's more nuanced than one over the other. When presenting column- or row-based, tabular data, then tables are still preferred. When styling something different, with no change to its meaning, then bold is okay. With HTML5, <b> gets even more interesting with additional attributes for the tags.

So do the terms DEALS, NOW, SPECIALS, and SERVICES have extra emphasis (<strong>) or are they just stylistically different?

The last part I don't have an easy answer for is the capitalization. Perhaps it's author-controlled and someday ALL CAPS will go out of fashion. Or maybe certain markets shouldn't have all capitals. Actually, not all languages have capital letters. So though you could enter the text in lowercase in a source language and present it in upper case with styles, this wouldn't apply to certain languages.