Should I avoid using text-align: justify;?
Firstly, this is purely a design-related problem and solution. The design of your grid specifies if justifying text is needed. I think justify align alone has no major effect on usability. Bad typography that makes text illegible is what decreases usability. That said, make sure you have solid contrasts and a good balance of spacing in your type. Font-size matters too.
This site is a successful attempt at justifying text online. Since you can't control the spaces between letters and words nearly as much with CSS as you can with InDesign, it's a lot harder to justify text and not have 'rivers' of whitespace run down your rows, which happens when the spaces between words exceeds the spaces between lines. Things that make justifying text difficult: long words, row widths that don't hold enough words, and too much contrast between the text and the background colors; they make the rivers appear wider and more apparent.
The typographic ideal is to have an even text-block, where if you squint the text block becomes a uniform solid shade. So if you keep text at about 10px and 60% gray on white background, and have rows that fit about 20 words, justify align shouldn't look ugly. But keep in mind this does nothing to improve usability. Small, relatively light text annoys a lot of people, especially the older readers.
I should note that with
(soft hyphenation) correctly separating long troublesome words like superawesome you can mimic proper typesetting (e.g. InDesign). There's a lot of stuff out there to help you do this. I would recommend the logic for hiding, manipulating, and displaying the text to be done on the client side, perhaps with this.
Edit: As others mention below, css hyphens are possible now, except not feasible (not in Chrome). Plus, css4 offers even more control.
How to right-align and justify-align in Markdown?
Aligning text in native markdown is not possible. However, you can align the text using inline HTML tags.
<div style="text-align: right"> your-text-here </div>
To justify, replace right
with justify
in the above.
cancelling text-align: justify; for certain parts of text
Options:
- Use FOUR-PER-EM SPACE U+2005 instead of normal space, e.g.
adipiscing elit
. There is no guarantee that browsers treat it as non-stretchable space, but that’s what they actually do, and it’s a rather natural thing to do. After all, it is one of the fixed-width spaces. Drawback: typically fails on IE 6 (a small box is shown instead of a space), if the primary font of the text is not Arial Unicode MS or some other especially “rich” font. - Wrap the words inside some inline markup (typically
span
) and settext-justify: none
anddisplay: inline-block
for it. Drawbacks: does not work old some old browsers, and forces the two words together (due to the latter declaration—and without it, this methods does not work on current browsers). - Use NO-BREAK SPACE instead of normal space. This used to work well, though with the drawback to forcing the two words together on the same line. But e.g. current Firefox treats no-break as stretchable, sadly enough.
- Use a technique like the one in Web_Designer’s updated answer. I would suggest making the width em valued, to make it relate to the font size. The typical width of a space is 0.25em.
Why doesn't text-align: center work on ul given it contains text
text-align
works when you want to center inline (or inline-block) elements that are contained within a parent block level element. You apply the style to the parent element.
Because ul
elements are not inline elements, they will not be centered when you apply text-align: center
to the parent. They are block level elements and block level elements by default take up the remaining space on that line.
To center a block-level element you can give it a specific width then you can apply margin-left: auto
and margin-right: auto
to the element. So, in your case if you give the <ul>
element a width and set the margin-left and margin-right to auto it will become centered within its parent div. No need for text-align: center
.
By default a <ul>
does not contain text, but an <li>
does. Therefore you can apply text-align: center
to an <li>
element to center the inline text inside of it.
Also, your <blockquote>
elements only contain block-level elements directly: <p>
and <footer>
. They do not contain text as a direct child descendant. And therefore nothing will be centered inside of it. If you only had text inside of it, then the text would be centered.
Update
As per your comment on centering and left-aligning, if I am understanding you correctly you can do something like this:
<style>
#parent {text-align: center}
#parent ul {display: inline-block; text-align: left}
</style>
<div id="parent">
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
</div>
The trick here is that you need to override the text-align=center in the ul because otherwise it gets inherited from the parent div.
Related Topics
CSS Image Max-Width Set to Original Image Size
What Is Better: CSS Hacks or Browser Detection
Need CSS Text Color for A:Hover to Take Precedence Over A:Visited
Css3 Fallback for Older Browsers
Why Do Professional-Made Websites Have Odd #Id and .Class Names
Can a Background Image Be Larger Than the Div Itself
Bootstrap 4, How to Center-Align a Button
Css-Selector for Multiple Elements
How to Apply Ckeditor CSS to Output
How to Create Pure CSS 3-Dimensional Spheres
Bootstrap 3 & Boostrap 4 & Bootstrap 5 - Input-Xs (Smaller Than Sm)
Avoid Z-Index Working Relative to the Parent Element
Svg with Radialgradient Not Work in Browsers
How to Display User Profile Image in Circle
User Agent Stylesheet Overriding My Table Style? Twitter Bootstrap