alexseanchai | (no subject)

O All-Knowing Dreamwidth: So how does one go about using HTML/CSS to justify text inside <ul> or <ol> tags?

I ask because I'm messing with a proofreading project and I'm working in raw HTML/CSS and hoping internet tutorials give me anything I don't already know but need to, and I've got the <p> tags defined as text-align:justify, but I can't figure out how to make that apply to my list tags. The list items are all showing left-aligned in both Firefox and Microsoft Word, which, since I got everything else justified or centered where I want it, hurts my eyes.

(I downloaded Microsoft Office 365—via the Oregon State University portal; this makes it free to me for either a year or till I graduate, I'm not sure—just to see how this project works when I open the html file in a properly functioning word processor. Dear LibreOffice team: I HOPE YOU'RE HAPPY.)

(LibreOffice doesn't play nice with html files, apparently; it just shows me the raw HTML, which I see just as well and indeed better in jEdit. I am delighted to note that Word knows what to do with the <ul> and <ol> tags better than Firefox apparently does.)

ETA: I figured out how to CSS the <li> tags and we are all better!

Flat | Top-Level Comments Only

Have you tried li {text:justify;}? Not that I have a great deal of luck with the justify tag. I usually don't justify things. :)

Nope, but I will now! Thanks.

ETA: Added the curly-bracketed bit to every <li> tag in the first list in the project. Saved. Refreshed the Firefox tab open to that file. No change. Opened the file in Word. No change. Still left-aligned. :(

And I've got to go to work now BOO.

Edited 2016-10-12 19:42 (UTC)

Whoops, that should be: text-align: justify.

Gotcha but I really gotta run now and can't test :(

Should just work with the ul tag. Here's a JSFiddle where it just works:

https://jsfiddle.net/r87w9g23/

I tested that this works in Chrome, Firefox and IE.

Thanks, will poke at later :)

I feel like you should be able to do it in a combination of selectors if needed, either exploiting the child relationship of the list items to the list block, or by specifically targeting only list items that are children of the correct list block.

...you're speaking Greek :p

(This is what I get for learning this all piecemeal instead of systematically, isn't it?)

Not really. I learned it piecemeal, too.

Basically, CSS lets you target specific relationships between tags, so that you can style the same element, like li, differently based on whether it's a list element of an ol or a ul. Depending on what you're creating, I'm wondering if the word processor program needs more specificity in the stylesheet to do what you want it to do.

Nod :)

Idk? It's not, as of the last thing I tried before leaving for work, working in either Firefox or MS Word. Regular paragraph justification is. The thing telophase suggests looks like it should work? Idk though. Figure it out Not At Work, right?

You should be able to get LibreOffice to open an html file as what it looks like, iirc - I'm at work so I can't test, but I think if you make sure html is selected as the file type in the "open file" dialog (as opposed to "all files" or whatever the default is) it'll look like the web page.

Huh. Weird. I'll test at home; thanks!

If that doesn't work, poke around the help files; I'm pretty sure there's a way, it's just not the default behavior.

Oooh that's much better!

...not totally better, because I think LibreOffice has no idea what to do with 0em and 1.5em and whatnot, because the file in Word has paragraphs styled like in a book with indentations and no whitespace between (like I want them) and the file in LibreOffice has them un-indented and with blank lines between (which is perfectly legible, just not desirable in this instance), but much better. I think I'll stick with Word, though.