1

I am basically trying to do THIS with a paragraph that contains text-indent, but can't get it because the display:inline won't allow text-indent. Any ideas?

Community
  • 1
  • 1
merdesigner
  • 13
  • 1
  • 3

2 Answers2

4

Using pseudo elements

I've created a JSFiddle example that uses span elements which are inline and then adds before and after pseudo elements to add additional spacing in front and at the end of each highlighted block of text.

In case you need to manipulate amount of that space adjust font-size within those pseudo elements and you should be good to go.

The trick is just:

.highlight {
    font-family: Helvetica, Sans-serif;
    font-size: 48pt;
    font-weight: bold;
    text-transform: uppercase;
}
    .highlight:before,
    .highlight:after {
        /* no-breaking-space (nbsp) entity */
        content: "\00a0";
    }

Controlling space amount

Using appropriate character(s) in :before and :after pseudo elements one can actually control amount of added spacing down to individual pixels.

The best way is to use thin space which is in typographical terms 1/5 or sometimes 1/6 of an em. If we set font-size of these two pseudo elements to 6 pixels thin space should always approximate to 1 pixel width regardless of dimension discrepancies.

.highlight:before,
.highlight:after {
    content: "\2009";
    font-size: 6px;
}

Upper style definition will add 1 pixel of space on each side. If we put 5 thin spaces in content, we'd get 5 pixel space...

Or use one thin space and add padding to it and control its width this way. Or even abolish any content and just use padding:

.highlight:before,
.highlight:after {
    content: "";
    padding: 0 5px; /* will give 10px space */
}

However one does it it's possible to control amount of space down to pixel granularity.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
  • seems awesome, but I was looking for a HTML/CSS solution... I don't know much of JS... – merdesigner Nov 05 '12 at 20:30
  • 3
    Man... this is 100% CSS, no javascript involved. JSFiddle is just a online test platform to try code. You should accept this answer if this is what you wanted ;) – Andrea Ligios Nov 05 '12 at 21:01
  • Ops, sorry for my ignorance... I'll implement it and see if it works! – merdesigner Nov 06 '12 at 08:26
  • by the way... what does the "\0000a0" mean? how can i alter it? – merdesigner Nov 06 '12 at 15:22
  • @merdesigner: it means exactly what the comment preceding it says... It's code for no breaking space. What would you like to change it to? you can put anything in this (i.e. "a") but I've deliberately put a **nbsp** in it, because it gets rendered by browsers without being *visible* (since it's a space). Normal space wouldn't do the trick because it's treated differently. – Robert Koritnik Nov 06 '12 at 16:16
  • @RobertKoritnik It would be nice to be able to control how much "padding" it adds to the text... is it possible? I've tried some variations, but most of them generated some serious bugs on most browsers... – merdesigner Nov 07 '12 at 19:58
  • 1
    @merdesigner: As said in my answer you can adjust `font-size` in `:before` and `:after` style definitions as long as they don't exceed your actual text size. But even then. You can use other characters that will get rendered. i.e. if you set `font-size` to `6px` and set content to **thin-space** (\2009) you'd get exactly 1 pixel space. duplicating content will get you pixel-control of the space. In this [updated example](http://jsfiddle.net/Jmk4D/3/) I've added 5 pixels on each side. – Robert Koritnik Nov 08 '12 at 12:47
  • 1
    Different entities you can use: thin-space (\2009), en-space (\2002), em-space (\2003), no-breaking-space (\00a0). But you'll have to learn what each of them represents. Oh and about that 6 pixel font size. I've seen that Chrome will not allow me to display lower size with currently selected font. So using thin space at 6 pixels size is 1 pixel space. Thin space in typographical terms is usually 1/5 (and sometimes 1/6) of an em. So when font size is set to 6 pixels (per em), thin space always approximates to 1 pixel regardless of discrepancies in width. – Robert Koritnik Nov 08 '12 at 12:55
4

Without br tag : demo here : http://jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}
Steven Mouret
  • 5,730
  • 1
  • 18
  • 21