What is a List Item?
A List item is the HTML term for the items in an ordered list or an unordered list. Ordered lists are numbered paragraphs and unordered lists are bulleted paragraphs. Here some examples of each:
Sample Ordered List:
The Top 5 albums of 1977
- Fleetwood Mac – Rumors
- Ramones – Rocket to Russia
- Various – Saturday Night Fever Soundtrack
- David Bowie – Low
- Meatloaf – Bat Out of Hell
Sample Unordered List:
Things to be happy about
- Ice Cream
- Sunrises
- A Hand to Hold
- Spring
- Silence
- Star Wars
Why not just manually number your paragraphs?
The issue here is that your web-site might be configured for some special treatment of lists and your manually numbered items won't show the same way. And it doesn't matter what you think of the lists, its the person in charge of the web-site who gets to decide and ideally things should be consistent. Here's an example of three manually numbered paragraphs. Compare how they appear to the ordered list above:
Favorite Things about Spring
1. It warms up
2. The smell after a good rain
3. Flowers
Why not use bullet Glyphs?
Unicode Emojis! The main problem with using a special character in Adobe InCopy or Adobe InDesign for bullets is that they might not appear the same way on everybody's browser when looking at the text online. For example, a common bullet in print is a large square made by using a capital N in the Zaph Dingbats font in an application like Adobe InDesign. But in a browser, where the fonts can not be controlled, it could show up as, well, yeah, a capital N, or worse. Certain characters trigger emoji's and if we let the newsroom staff insert bullets, as opposed to using the unordered lists and accompanying Paragraph Styles they could end up with random things like unwanted poop emojis* showing up in front of text online.
* Yep, it happened. One of our sites didn't use proper styles and that really happened. There is no way to filter for undesirable unicode characters. Do it right or the unmentionable might hit the fan.
And then there is the standard issue that a manually added bullet might not appear as the web-designer wanted. Here is a short list using bullet glyphs
My Favorite albums of 1977
• Steely Dan – Aja
• Fleetwood Mac – Rumors
Again, compare that with the unordered list above.
Normal Translation of List Items
Translation of list items is easy and has existing since early in the life of BLOX Total CMS. Most rulesets trigger off of the HTML <li> and then call a ruleset to handle the formatting. There might be several so that the Related Content boxes call different paragraph styles than body text in an article. The general rule of thumb however apply an appropriate numbered or bulleted paragraph style for the <ol> or <ul> tag. Then follow that up by breaking the individual list items <li> into individual paragraphs. It's just a few lines and TownNews supplies them.
The problem with Write-back of Lists
Unlike normal paragraphs of HTML (what BLOX CMS display after being processed via CSS) an ordered list or unordered list of text is all one entity. So the multiple paragraphs in Adobe InCopy or Adobe InDesign have to be combined into a single blob. A simple two item ordered list would appear as this:
<ol><li>First Item</li><li>Second Item</li></ol>
But the normal write-back of paragraphs would want to break that up further and return this:
<ol><li>First Item</li></ol>
<ol><li>Second Item</li></ol>
And if that was allowed, the browser wouldn't number them correctly and there would typically be larger amounts of space between the items of the list like this:
- First Item
- Second Item
So, there are already difficulties of supporting the write-back of lists. BLOX Total CMS is up to the challenge, and we've supported write-back of these items for many years, but it does get tricky.
The problem with inter-list formatting
This is where things get complicated for BLOX Total CMS. Let's say you want to combine a list and you also want to bold (strong) or italicize (emphasis) text within the list. See that very first list above where the album titles are italic. Prior to client 5.09.31, from November of 2014, every internal formatted item, like the Rumors album title, would end up on a separate line of the list as shown below:
The Top 5 albums of 1977
- Fleetwood Mac –
- Rumors
- Ramones –
- Rocket to Russia
- Various –
- Saturday Night Fever
- Soundtrack
- David Bowie –
- Low
- Meatloaf –
- Bat Out of Hell
That's just so very, very wrong! That was corrected with some special changes to the BLOX Total CMS client and some special entries in a site's Export ruleset to wrap the combination of the Adobe InCopy/InDesign Paragraph and Character Style combinations. That combination is shown below:
Just tell me what I need to do!
Unless you are a savant, the easiest process is:
- Create an Article asset in the browser interface that uses an Unordered list
- Within that asset, make some of the entries have bold and some other entries have italic text by using the B and I icons in the browser interface.
- Return to Adobe InDesign and place that asset on a page.
- Verify the placed asset formats the asset as a list with bold and italic text. If not, create a support ticket at support.townnews.com and ask for assistance configuring the translation of the lists. Without good translation there can't bee good write-back. The goal is for reflow to work perfectly. Do NOT manually format the list.
- Note the names of the Paragraph and Character Styles that the Translation used. For this example we will assume that the three styles are: BCB Body Copy Bullet, Strong, and Emphasis
- Use InCopy > Save Content to force the asset to write-back.
- Check the asset in the browser interface to verify that it wrote-back as expected. If not, proceed to the next step.
- Return to the browser interface and open your Export ruleset. While the order doesn't matter, it is easiest to follow if you place all the List rules together.
- If it doesn't then you need the following three rules:
| Start tag | Start tag replace | End tag replace | Paragraph Style | Character Style |
| #! | <ul><li> | </li></ul> | BCB Body Copy Bullet | |
| #! | <wbr><ul><li><em> | </em></li></ul><wbr> | BCB Body Copy Bullet | Emphasis |
| #! | <wbr><ul><li><strong> | </strong></li></ul><wbr> | BCB Body Copy Bullet | Strong |
- After applying each rule that you added/verified, Save an Close the Export Rulesets
- Return to Adobe InDesign
- Use BLOX Total CMS > Update and Reset > Translation Rulesets
- Use the same InCopy > Save Content option
- Return to the browser and update the view of the asset so that you can see the results.
- If you failed to make it work, feel free to open a support ticket using the url above.
- Repeat the process with an Ordered List
Those Rules Above
A Full Wrap
In each case we are sending a full wrap of the list type <ul> and the list item <li>. The write-back code within the client sees this and removed the cases where the </ul> and <ul> tags bump into each other between every paragraph of the list.
What's <wbr>
The <wbr> tag is NOT a proper HTML tag and it is being used as a placeholder for a write-back return. Remember the problem where each change in Character Style causes a new line (see the example in the second use of the top albums of 1977). That still wants to happen, but the client code looks for the <wbr> placeholder and remove it as well as the adjacent </li></ul> and <ul><li> and it gets returned to a single line with the <strong> or <em> tags.
These <wbr> tags are a hack, but they work. If you want the lists to write-back properly, they are needed.
What about just applying Bold or Italic fonts in Adobe InCopy or Adobe InDesign?
This will likely NOT work. There is no way to list that in the Export ruleset. With the <wbr> tags to bring the lines back together. It will end up breaking each different format onto its own line as shown above - prior to the 2014 enhancement which allowed the paragraph style / character style combinations to write-back correctly.
In other words, if you want change the formatting in Adobe InCopy or Adobe InDesign, you CAN apply the same Character Styles listed in the export ruleset for the in use Paragraph Style. That works. Everything else doesn't.
Applying Bold (B) or Italic (I) in the browser interface is fine so long as it applies the proper Strong or Emphasis Character that is listed in the Export Ruleset.
