Formatting question--whitespace, bulleted lists October 13, 2010 1:36 PM   Subscribe

How do I add white space between items in bulleted lists on Metafilter?

Specifically, this:
posted by craniac to MetaFilter-Related at 1:36 PM (66 comments total) 4 users marked this as a favorite

Extra BR tag after the closing LI tag. posted by jessamyn (staff) at 1:38 PM on October 13, 2010


.... works on preview, doesn't work on post. Huh. Two BR tags inside the closing LI tag.
posted by jessamyn (staff) at 1:40 PM on October 13, 2010


The br tags only work in preview, jessamyn.
  • Item the First
    •  
  • Item the Second
posted by jedicus at 1:40 PM on October 13, 2010


I got nothing.
posted by jessamyn (staff) at 1:40 PM on October 13, 2010 [1 favorite]


</li>

<li>this
<li>is
<li>a
<li>test

produces

  • this
  • is
  • a
  • test

    -- whereas this:

    <li>this</li>
    <li>is</li>
    <li>a</li>
    <li>test</li>

    produces:

  • this

  • is

  • a

  • test

    • posted by koeselitz at 1:41 PM on October 13, 2010


    Here's a list with proper open and close li tags but no containing ul tag, since I think that produces extra whitespace:

  • butts

  • lol

    • posted by cortex (staff) at 1:41 PM on October 13, 2010 [5 favorites]


    • The Murder of Leo Tolstoy [pdf] by Elif Batuman from Harper's
    • LALALALALALALA
    THREE BR tags inside the closing LI tag. Ah ah ah.
    posted by SpiffyRob at 1:42 PM on October 13, 2010


    In parseable words:

    What's happening here is you're not closing your <li> tags. When you post, the posting form automatically closes them for you – by adding a bunch at the end, where they don't do what you want them to (that is, close the tag and allow whitespace). So close them yourself by putting </li> at the end of every line.
    posted by koeselitz at 1:42 PM on October 13, 2010 [1 favorite]


    Ah, I did some silliness with pre tags enclosing an nbsp entity, but yeah, that other stuff works too.
    posted by jedicus at 1:43 PM on October 13, 2010


    I closed my LI tags in my examples and it was still fuckity.
    posted by jessamyn (staff) at 1:44 PM on October 13, 2010


    Could you nerds speak English, please?
    posted by dersins at 1:45 PM on October 13, 2010 [1 favorite]


    Alternatively, you could ask for a change to the default stylesheet.
    posted by holloway at 1:45 PM on October 13, 2010


    Huh. Well, that's weird.

  • this

  • is

  • a

  • test

    • posted by koeselitz at 1:45 PM on October 13, 2010


    Well, I conclude that you've broken the internet. It works just fine for me.
    posted by koeselitz at 1:45 PM on October 13, 2010


    Ah, the trick is to not enclose the open & closed li tags with ul tags. Unenclosed you get extra whitespace. Enclosed you don't.

    This seems to be taking advantage of an oddity in the MeFi HTML parser.
    posted by jedicus at 1:50 PM on October 13, 2010


    Yeah, checking the source now, if you enclose with ul tags then MeFi doesn't put a br tag at the end of each /li tag. If you keep the list items unenclosed, then MeFi sticks br tags on the end of each line.
    posted by jedicus at 1:53 PM on October 13, 2010


    @koeselitz: I've closed my LI tags, but removing the UL tags appears to open it up.


  • la la
  • la la la

    • posted by craniac at 1:53 PM on October 13, 2010


  • Oh
  • hey
  • look
  • at
  • that.

    * Now I can stop ...
    * ... using asterisks.

    • posted by Cool Papa Bell at 1:54 PM on October 13, 2010


    The problem is that leaving out the UL tags opens it WAY up. But it's not a big problem.
    posted by craniac at 1:54 PM on October 13, 2010


    Okay, yeah – that makes sense: just don't use <ul> at all. I'm such a crap HTML-writer that it didn't even occur to me to us <ul>. Heh.

    Which makes sense. Everybody knows that metafilter doesn't mind if you <li> to us.
    posted by koeselitz at 1:54 PM on October 13, 2010 [2 favorites]


    Foolish MeFi scientists. So preoccupied with whether or not you could take up more space, you didn't stop to think if you should.
    posted by Gator at 1:56 PM on October 13, 2010 [4 favorites]


    Here's how to do it if you want to be proper-like, I think.
    • Item the First
      •  
    • Item the Second
    That's

    <ul><li>Item the First</li>
    &nbsp;
    <li>Item the Second</li></ul>
    posted by jedicus at 1:56 PM on October 13, 2010 [1 favorite]


    Yeah this is something we fixed a while back. Most folks didn't want line breaks within an HTML list. It was a constant complaint so we simply remove breaks within <ul> and <ol> tags. I think your best bet is to use standalone <li> tags with lines between them. Or skip the bullets altogether and just have your list of items on every other line.
    posted by pb (staff) at 1:57 PM on October 13, 2010


    Thanks. I only wanted to bullet it because it auto-indents and looks a little nicer.
    posted by craniac at 2:02 PM on October 13, 2010


    I think your best bet is to use standalone li tags with lines between them. Or skip the bullets altogether and just have your list of items on every other line.

    But then how will the Semantic Web know it's a list, much less an unordered one? You're killing Web 3.0, pb. Somewhere Tim Berners-Lee is crying.
    posted by jedicus at 2:03 PM on October 13, 2010 [7 favorites]


    That list is fine without extra spaces between the items. I'd be more annoyed by a list that unnecessarily takes up an entire screen full of space.
    posted by Wolfdog at 2:03 PM on October 13, 2010


    Or skip the bullets altogether and just have your list of items on every other line.

    Sure, and why don't you just take off those shoelaces!
    posted by carsonb at 2:04 PM on October 13, 2010


    El-eye el-eye el-eye eh eh.
    posted by klangklangston at 2:04 PM on October 13, 2010 [2 favorites]


    jedicus: Characters unenclosed by <li>s are actually not allowed within <ul>s, so technically that's not quite a proper solution either.
    posted by kmz at 2:05 PM on October 13, 2010


    Alternately, if you want more space between list elements for you, you could write a custom user style for Metafilter. Something like Stylish makes this easy in Firefox, and you could add something like this: ul, ol {line-height:150%;}.

    The frustrating thing with HTML is that you can't control how others will see things.
    posted by pb (staff) at 2:05 PM on October 13, 2010


    The frustrating thing with HTML is that you can't control how others will see things.

    That's why all my webpages are giant GIFs.
    posted by kmz at 2:08 PM on October 13, 2010 [4 favorites]


    Testing, testing:

         The Murder of Leo Tolstoy [pdf] by Elif Batuman from Harper's 

         The Bad Lion by Toni Bentley from The New York Review of Books 

         The Dead Book by Jane Churchon from The Sun 

         Irreconcilable Dissonance by Brian Doyle from Oregon Humanities 

         The Elegant Eyeball by John Gamel from Alaska Quarterly Review 

         How Einstein Divided America's Jews by Walter Isaacson from The Atlantic 

         Lunching on Olympus by Steven L. Isenberg from The American Scholar 

         "Me, Myself, and I" by Jane Kramer from The New Yorker 

         When Writers Speak by Arthur Krystal from The New York Times Book Review 

         A Rake's Progress by Matt Labash from The Weekly Standard 

         "Brooklyn the Unknowable" by Phillip Lopate from Harvard Review 

         On John Updike by Ian Mcewan from The New York Review of Books 

         My Genome, My Self by Steven Pinker from The New York Times Magazine 

         "Gyromancy" by Ron Rindo from The Gettysburg Review 

         Guy Walks Into a Bar Car by David Sedaris from The New Yorker 

         Speaking in Tongues by Zadie Smith from The New York Review of Books 

         Rediscovering Central Asia [pdf]by S. Frederick Starr from Wilson Quarterly 

         Gettysburg Regress by John Summers from The New Republic 

         "Fatheralong" by John Edgar Wideman from Harper's 

         Daredevil by Garry Wills from The Atlantic 

         "A Fine Range" by James Wood from The New Yorker 
    posted by craniac at 2:11 PM on October 13, 2010 [1 favorite]


    Characters unenclosed by li tags are actually not allowed within ul tags, so technically that's not quite a proper solution either.

    Shows what I know. Fine, we'll just abuse both HTML and the MeFi parser thusly:
    • Item the First 

      • 

    • Item the Second
    

That's
    

    
<ul><li>Item the First <pre></pre></li>
    
<li>Item the Second</li></ul>
    posted by jedicus at 2:12 PM on October 13, 2010 


     



  •  

    • 

    
Well, obit threads have been changed for me forever.  That's right, I'm gonna be mourning bigger than you, what with your puny "."
    posted by .kobayashi. at 2:13 PM on October 13, 2010 [8 favorites] 


     



    MetaFilter needs a Clippy. 
    

    
"It looks like you're trying to make a post. Would you like help?"
    posted by zarq at 2:19 PM on October 13, 2010 


     



    Is this a business post, or a personal post?
    posted by Think_Long at 2:20 PM on October 13, 2010 


     



    It all looks like brown space to me.
    posted by pracowity at 2:20 PM on October 13, 2010 


     



    That list is fine without extra spaces between the items. I'd be more annoyed by a list that unnecessarily takes up an entire screen full of space.
    
Agreed.  The problem with nerds is that (as Gator noted), they get obsessed with finding a way to do things they shouldn't do in the first place.  The good thing is that they know this and won't do it - they just want to prove they can.
    posted by dg at 2:28 PM on October 13, 2010 [1 favorite] 


     



    Is  "ul type" not supported?

    • circle item
    • square item
    posted by psyche7 at 2:35 PM on October 13, 2010 


     



    Posted. Thanks.
    posted by craniac at 2:35 PM on October 13, 2010 


     



    Is "ul type" not supported? 
    

    
As far as I know, MeFi doesn't support any tag attributes.
    posted by jedicus at 2:39 PM on October 13, 2010 


     



    Definitely prefer it without the spaces.  Too bad you went that way.
    posted by smackfu at 2:43 PM on October 13, 2010 


     



    As far as I know, MeFi doesn't support any tag attributes.
    

    
Yeah, we only support the title attribute in a, abbr, and acronym tags. And of course the href attribute in a tags.
    posted by pb (staff) at 2:45 PM on October 13, 2010 


     



    "The frustrating thing with HTML is that you can't control how others will see things."
    

    
Total feature not a bug.
    posted by Mitheral at 2:58 PM on October 13, 2010 [4 favorites] 


     



    Is this going to turn into another one of those threads where people post in the margins and up at the header and shit?
    posted by shakespeherian at 2:58 PM on October 13, 2010 


     



    I flagged your FPP HTML/display error for using too much space.
    posted by BeerFilter at 3:22 PM on October 13, 2010 


     



    It all looks like brown space to me.
    

    
It's all "whitespace" this and "whitespace" that when everyone knows that the website this is post is designed for is an unprofessional blue!  All your "whitespace" fixes won't do a damn thing for you against the oncoming blue!  MUHAHAHA
    posted by graventy at 3:30 PM on October 13, 2010 


     



    I flagged your FPP HTML/display error for using too much space.
    

    
Why are you making this my problem, it's clear I don't know how to fix it. I make lists like this
    

    
- clean
    
- all
    
- the things.
    posted by jessamyn (staff) at 3:36 PM on October 13, 2010 [4 favorites] 


     



    Putting a blockquote container inside each list item container seems to work in preview, let's see what it does when posted:

    • Item 1
    • Item 2
    • Item 3
    posted by FishBike at 3:45 PM on October 13, 2010 


     



    Definitely prefer it without the spaces. Too bad you went that way.
    
posted by smackfu at 9:43 PM on October 13 [+] [!]
    

    
I'm a little dyslexic or something, so when there isn't any space between the lists, and we have a sans-serif font, it's really hard for me to read.  You are welcome to copy the code and repost in the original thread with a scrunched up version that oppresses people with disabilities and spits upon the notion of visual literacy.
    

    
that was a joke
    posted by craniac at 4:24 PM on October 13, 2010 


     



    Oh wait, the very first post in this thread has it all crammed together, like compacted stool.  So there you go!
    posted by craniac at 4:25 PM on October 13, 2010 [2 favorites] 


     



    It all looks like brown space to me.
    

    
Time to recalibrate your monitor, dude.
    

    
(It's grey.)
    posted by Sys Rq at 5:49 PM on October 13, 2010 


     




    

    Testing testing:

    

            • The Murder of Leo Tolstoy [pdf] by Elif Batuman from Harper's 

    
    
         • The Bad Lion by Toni Bentley from The New York Review of Books 

    

              •The Dead Book by Jane Churchon from The Sun 

    
    
       •   Irreconcilable Dissonance by Brian Doyle from Oregon Humanities 

    
    
      •    The Elegant Eyeball by John Gamel from Alaska Quarterly Review 

    
   
        •   How Einstein Divided America's Jews by Walter Isaacson from The Atlantic 

    
   
        •   Lunching on Olympus by Steven L. Isenberg from The American Scholar 

    
    
       •   "Me, Myself, and I" by Jane Kramer from The New Yorker 

    
   
       •    When Writers Speak by Arthur Krystal from The New York Times Book Review
     
    
   
         •  A Rake's Progress by Matt Labash from The Weekly Standard 

    
   
       •   "Brooklyn the Unknowable" by Phillip Lopate from Harvard Review 

    
  
         •   On John Updike by Ian Mcewan from The New York Review of Books 

    
    
     •     My Genome, My Self by Steven Pinker from The New York Times Magazine 

    
    
         • "Gyromancy" by Ron Rindo from The Gettysburg Review 

    
    
       •   Guy Walks Into a Bar Car by David Sedaris from The New Yorker 

    
     
       •   Speaking in Tongues by Zadie Smith from The New York Review of Books 

    
   
    •      Rediscovering Central Asia [pdf]by S. Frederick Starr from Wilson Quarterly 

    
     
    •     Gettysburg Regress by John Summers from The New Republic 

    
    
      •    "Fatheralong" by John Edgar Wideman from Harper's 

    
   
        •   Daredevil by Garry Wills from The Atlantic 

    
    
       •   "A Fine Range" by James Wood from The New Yorker 

    

    


    posted by jenkinsEar at 6:44 PM on October 13, 2010 


     



    DL / DT / DD seems to work, and gets a magic BR appended...
    posted by jenkinsEar at 6:46 PM on October 13, 2010 


     



    You know, option+8 in good-old typing makes a bullet. •
    

    
and then you return, return. 
    

    
don't forget to wind the ribbon now and again, or it will fade out. Also, the *ding* means you're nearly out of space.
    posted by Devils Rancher at 7:48 PM on October 13, 2010 [1 favorite] 


     



    Option???  Return???
    posted by Sys Rq at 7:57 PM on October 13, 2010 [2 favorites] 


     



    I really like bulleted lists where there's _some_ space between the items, but not a whole blank line's worth.
    

    
Would it be awful to just set up the default style sheet for Metafilter to put a little extra space between list items?  I mean, I realize there's probably some reason it's a bad idea, but since I couldn't think of one immediately I thought I'd throw that out there.
    posted by amtho at 8:03 PM on October 13, 2010 


     



    Since we're talking about text formatting:
    

    
How do people do the thing where their quoted text is block indented?
    posted by Phredward at 8:35 PM on October 13, 2010 


     



    <blockquote> will do it.
    posted by jessamyn (staff) at 8:38 PM on October 13, 2010 

     



    blockquote
    posted by dg at 8:38 PM on October 13, 2010 


     



    Bulleted lists? So *that's* how Leo Tolstoy was murdered.
    posted by lukemeister at 9:10 PM on October 13, 2010 


     



    amtho: We did something similar to remove whitespace after <blockquote>s.
    

    
That said, MetaFilter also has a slightly lower line-height than most other websites and it seems to be a conscious decision to keep it that way. I agree with that. We are, after all, a literate community and anybody who is intimidated by single spacing probably wouldn't enjoy the rest of the menu.
    posted by yaymukund at 9:42 PM on October 13, 2010 


     



    Three BR tags followed by a unicorn:
    

    
<BR /><BR /><BR />UNICORN
    posted by blue_beetle at 5:09 AM on October 14, 2010 


     



    My apologies.  I always forget that I have the font set bigger than default, so it's probably not as annoyingly large for everyone.
    posted by smackfu at 8:28 AM on October 14, 2010 


     



    You don’t. You don’t get to control the presentation of this site; the site CSS does. Don’t be stuffing your code with detritus.
    posted by joeclark at 9:10 AM on October 14, 2010 


     



    Really? You people don't all just use &bull; for your lovely 
    

    
• bulleted
    
• items
    
•        like so,
    

    

    

    

    
• with total control over how many spaces between lines
    

    

    

    

    

    

    

    

    

    

    
• and no tags to close?
    

    
I don't know what I think about that • • • • • • • • • • •
    posted by pineapple at 2:47 PM on October 18, 2010 


     


    


	« Older Help me find the post I'm thinking of, or the song...   |   Thanks for the link. I made a book out of it. Newer »

	


    


		
    
		
		
		
		
		
    
	
	

    You are not logged in, either login or create an account to post comments