Keyword List Formatting

Motorider

Anyone know how we can FIX these problems in SMs default formatting of keyword lists that are used on my website to help users find & sort photos?

Main KW List
1) Formatting changes to all lower case letters. Is it too much to ask that the formatting I have used on my KWs be carried through onto my website?
2) Characters are removed. ie: 'Laminate (HPL)' becomes 'laminate hpl', 'Garage/Shop' becomes 'garageshop'.

Secondary KW Lists (AKA "Combine With", or the additional KWs shown with the '+' sign in front of them)
As mentioned in this post, there are serious problems with this functionality including:
1) List is not in alpha-numeric order.
2) List is limited to 10 randomly chosen KWs, even though more than 10 KWs may be available and applicable for use as related KWs.

Allen

Capitalize 1st character and justify whole list.

.sm-keywords-list {
    text-transform: capitalize;
    text-align: justify;
}

I had to use underlines (_) for dashes (-) .

Motorider

Very cool, thanks Allen. Unfortunately it doesn't work for words that have multiple capital letters in a row (ie: MDF). And I don't understand what you mean about the underlines.

Allen

I list birds and a lot of them have dashes in their names. example: Yellow-rumped Warbler.
https://www.photosbyat.com/keyword

You would have to show MDF as M D F.
Another problem is caps for dashed sets like Black-crowned Night-Heron
or in my case KW comes out Black_crowned Night_heron.

Motorider

OK, after looking through your site I have to say it again. WOW Allen! Nice work & thank you for taking the time to share some of your experience.

So I get what you're saying about the dashes now, but here's something interesting that I found on your site. You allow users to search your by keywords on two separate pages of your site & they are slightly different. The following screenshots show keywords that my cursor is hovering over as specific examples.

1) The KW list on this page which shows:
https://photosbyat.com/keyword
a) The dash between words has been replaced by an underscore.
b) The 1st letter doesn't turn yellow when hovered over like the rest of the KW does.
c) The divider between words is a vertical bar.

2) The KW list on this page which shows:
https://photosbyat.com/search
a) The dash between words is still a dash.
b) The 1st letter turns yellow when hovered over like the rest of the KW.
c) The divider between words is a yellow dot.
d) The KW list is scrollable.
e) There's a search box.
f) Additional buttons for PHOTOS, VIDEOS, GALLERIES, FOLDERS & PAGES; of which only PHOTOS & VIDEOS seem to work in addition to the selected KW.

So my question for you is, how did you format the scrollable KW list?

And my questions for SmugMug are:
1) Again, why can't I display my KW list exactly as I've formatted it? Even using Allen's tips it not possible to show a word in all caps like MDF, or see words in brackets like Cherry (Black).
2) Why would you have a KW search box that doesn't help users find KWs with things like auto-populate while typing or only returning similarly spelled searches? For example, when I search Allen's site for partial spellings of 'Phoebe' (which I can see is a KW because I'm hovering over it in the list) I get mixed results, none of which make me feel sure I'm seeing all pics with that KW.

Allen

The box on the search page was created using HTML many eons ago, so what you're seeing is the text typed however I want it to appear.
Notice mandatory dash (#8209;) and spaces ( ). Keeps words from wrapping.
The link has an underline as that is what I use in the keyword instead of a dash

<a href="/search#q=red_bellied+woodpecker">Red&#8209;bellied&nbsp;Woodpecker</a>&nbsp;<span style="color: yellow;">•</span>
<a href="/search#q=red_eyed+vireo">Red&#8209;eyed&nbsp;Vireo</a>&nbsp;<span style="color: yellow;">•</span>

Go into the smart gallery settings and auto-populate while typing works.
The vertical bar between KW's is a right border.

BTW, might remove box soon as needs many updates.

Motorider

This makes me