HTML for long list of words

Home Forums Web Hosting Forum HTML for long list of words

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Keith Taylor 2 years, 11 months ago.

  • Author
    Posts
  • #2700

    Ray
    Participant
    Ŧollars: Ŧ 59.30



    When I’m presenting a long list of words I often use a spreadsheet. Then I can add columns to add HTML tags for lists, tables, or Definition Lists.

    I’ve got a long list of single words that I want to show as comma-separated. Or, better still, semicolon separated.

    Is there an easy way to do this?

  • #2704

    Keith Taylor
    Keymaster
    Ŧollars: Ŧ 1 ,161.56

    If you want to split columns across the page, the CSS3 multi-column mode is now supported by more browsers. It’s not something I’ve used much, but I will be experimenting with it.

    Sometimes, its best just to keep it simple. In this case, that means reformatting your list of words, rather than using HTML to display differently. I found a great Free Comma Separating Tool. Fortunately, it does much more than commas. 🙂

    By default, the dropdown list of word separators offers comma, semicolon, pipe (|), and a single space. Confusingly, the dropdown says ‘Spaces’ but only inserts a single space. In any case, if text is to be pasted into a web page, multiple spaces are irrelevant (unless you use code or pre tags). This is because HTML ignores multiple spaces.

    For normal content writing, we need commas or semicolons between lists of words in sentence style. Unfortunately, this tool would present lists of words
    delimited;by;semicolons;like;this.
    Or,with,commas,it,would,look,like,this.

    Fortunately, the delim.co tool has Converter Settings below the input/output form. There, you can specify your own delimiters. Note that you cannot type spaces into the ‘Delimiter’ option. However, we can use HTML Numbers and HTML names. The ‘space’ character does not have a name, so we use it’s ascii decimal number: 32. This is written as &#032 ;

    Note: there should not be a space after the 2. I have to show it that way as a bug causes the #032; code to change back to a space! 😕

    Recently, I used this technique with a semicolon and space between each word. however, I thought it looked better with 2 spaces. As I said, we cannot use two normal spaces, as browsers will only display a single space. However, HTML has a character called ‘hard space’ or ‘non-breaking space’ which has the HTML name:  

    If we only use hard spaces, we get a single word. When that is displayed, it will be hyphenated. Or, it will scroll across the screen on one line, depending on styling settings.

    To overcome this, we follow hard spaces with a normal soft space. I used ;  &#032 ; which turns:

    I
    Love
    Shrewdies
    Web
    Hosting
    Forum

    into: I;   Love;   Shrewdies;   Web;   Hosting;   Forum 😀

You must be logged in to reply to this topic.