Hacker News Reader

Comment by err4nt | Hacker News Reader

This is a great technique and I've been using it on projects for over a year now. This is the first time I'm seeing anybody else write about it or use the technique!

One question for the author: Why repurpose a Horizontal Rule <hr> when HTML has a perfectly functional Line Break tag ?

You can use @media queries to set display: none; on tags and then those tags have no effect, and then you get to decide when they kick in.

This is a great idea, but ignoring the built-in line break to repurpose and restyle the horizontal rule tag seems like an arbitrary choice for implementing the technique.

View on HN

Thanks for the positive feedback! My reasons are: 1) You still want to have the option of a "hard" BR 2) I want to set the HR as a high level class, so I can use it freely through whatever I'm working on.

For example:

Headline

The quick brown fox jumped <hr>

over the lazy dog.

You 100% want the line break after the headline, and want to set an optional one in the subtext.

I like it because its very clean to look at, but you can also create a responsive class like <div class="desktop-breakline"></div>

If you're going as verbose as using a class, just put the class on the br tag.

Headline The quick brown fox jumped over the lazy dog.

This is what I did originally,

But now I'd rather just use the media query to only affect the inside of the H1 or other container where the line break appears.

Another consideration I didn't see in the article that I train the people updating the marketing copy: put your white space before the line break. When it's all inline it will display as one line, but you don't want to have a space after the line break at the start of the new line. programmers may be conscientious of where the white space is but its a real eye-opener for marketing-types who only pay attention to the content, not the space around it!

Reply on news.ycombinator.com