: What are the best practices for dealing with desired line breaks in responsive web design? I design a great deal of simple single page web items for sales or email. I often find I run into

@Kaufman565

There's a jquery plugin for that, Balance Text.

It's an Adobe-made plugin created alongside of Adobe's proposal to get a CSS option text-wrap: balance; that would just do this like Adobe InDesign's Balance Ragged Lines feature (sounds great, but even if it is accepted, it'll be years before browsers support it).

The plugin, however, works right now. It balances any elements that have the class balance-text, or on using jQuery like $('.some-elements').balanceText();


Here's an official Adobe demo, using justified text.
Here's a demo I made using left-aligned <h1>s - hit edit to see the code. This shows some of the limitations at time of writing:



Limitations

This code currently only works on text in block-level tags with no inline elements.


In demo 4 you'll see how anything within your block of balanced text like an <a> link, <span>s or emphasis like <em>, <strong>, <b>, <i> etc gets removed.

Also, comparing demos 1, 2 and 5, you'll see you seem to need to use both the CSS class and the jQuery call.



It seems moderately reliable but sometimes glitchy - at time of writing, it occasionally slips up when it's in a side column, leaving lone orphans (but it seems to work 95%+ of the time and I've not yet seen it slip up except when in a side column), and for unexplained reasons, my demos don't work on Firefox but Adobe's demos do (fine in IE9+, can't test in IE8 right now). If you use it, factor in some testing time.

Vote Up Vote Down

@Turnbaugh909

My current method...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>


And the CSS:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}
@media only screen
and (min-width : 321px) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen
and (max-width : 320px) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
h1 { margin: 0 auto; text-align: center; width: 550px; }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
h1 { margin: 0 auto; text-align: center; width: 800px; }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
h1 { margin: 0 auto; text-align: center; width: 550px; }
}

@media only screen
and (min-width : 1224px) {
h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */ @media only screen
and (min-width : 1824px) {
h1 { margin: 0 auto; text-align: center; width: 1200px; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}


Widths sometimes need some adjustment based upon actual text being used, but this is the general scheme I use. Essentially reducing the width of the h1 tag so that the line breaks where I want it to break.

This does work, it just requires testing thoroughly to ensure breaks are occurring where desired. But, then thorough testing is needed in any event. So, it's not necessarily more work in that respect.

Vote Up Vote Down

@Ann6370331

You can use JavaScript to detect the screen width and write the correct version (with < br>'s as you have them in your post) into an empty div via innerHTML.

Unfortunately, "desired web breaks" and "best web practices" don't go together. Let go of your perfectionist desire to get every word in the right place -- there are just too many screen possibilities and too many readers who don't have the designer mindset you have to even care about line breaks in their titles. Look up Responsive Web Design to get a better understanding of these issues.

Vote Up Vote Down

@Angie364

I'm only advising this on the basis that it's used for short snippets of text and not paragraphs.

The formatting of headlines can and should be controlled as much as possible within reasonable limits. JavaScript, or extra unnecessary elements are not quite "reasonable limits".

Non-Breaking Spaces on the other hand...               can be useful when used in moderation.
Placing them between the word pairs and triplets that you would like to keep together can produce the results you want.

However, you cannot use many consecutively, depending on the lengths of the words you're using, linking too many will force the text to overflow out of the viewport or its container.

Some quick experimentation on your own particular set of words should reveal the best words to link.

For the example in this question the HTML could look like:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>


There is actually no CSS necessary here. The CSS in this example I've produced is just for fun.



In a nutshell, the key to this method is limiting the number of places where the text is allowed to break.



After re-reading the question, I realise I didn't quite satisfy the requirements. For this specific case, and on the assumption that there are other pages that require the same attention, I would define a single <br> for a full-width breakpoint. I would then reuse the same class on each of the pages at the most ideal place in the heading.

This <br> class would collapse at anything smaller than full-width acting as if it isn't even there, with the use of media queries. At viewport sizes less than full width, we rely on the &nbsp;'s alone.

Another example with a single <br> that's closer to the mark.

The HTML:

<span>
Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>


The CSS:


@media screen and (max-width:550px) { /* Max Width depends on your design */
.full-width-breakpoint { /* only experimentation or */
display:none; /* calculation will reveal */
line-height:0; /* the best max-width */
}
}

Vote Up Vote Down

@Holmes874

The best practice is to acknowledge that you have no real control over line breaks on the web and it's best to design with that in mind.

Any solution to the contrary will, invariably, have to be hacky. As it will be a hack as HTML doesn't adhere to user defined line breaks outside of hard coding. You could do it with JS fairly easily. Set up your break points with empty spans with unique classes then based on the viewport size you could inject BR tags into each SPAN desired.

There are some CSS styles that will work on newer browsers to control the way the browser handles line wrapping, but it still won't give you the exact control you're looking for in this situation.

On the other hand, if your goal isn't so much to control specific line breaks, but to make sure your text block 'stacks' in relatively even rows, I'd setting the width of the DIV differently for each viewport. It won't be perfect, but likely pretty close and might be the best compromise.

Vote Up Vote Down