hanging-punctuation …

[nathan05]

I am trying to attempt using the following in CSS3 … but am not sure how to implement it … since I am already using the “text-align” for the bit of text located below the menu bar at http://www.design-marq.com

here are the two links I have found on hanging punctuation.

http://www.w3.org/TR/css3-text/#hanging-punctuation0.
http://coding.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/

Here is the css I have in place already

#author-bio {
float: right;
margin-bottom: 15px;
text-align: right;
width: 27.6596%;
}

[Paulie_D]

Obviously the the hanging-punctuation property is not implemented in any browser as yet.

The only thing I can think of, if you must, is to wrap the period/full stop in a span and add some negative margin-right.

About 0.25em should be about right perhaps a bit less: http://codepen.io/Paulie-D/pen/qpGov

[nathan05]

Paulie,

Thanks … along with your code … here is what I have now … the only thing is when I test it in Opera12
and I make the window smaller (not minimize) starts to flow into the image.

#author-bio {

float: right;

margin-bottom: 15px;

text-align: right;

width: 250px;

margin:-50px;

padding-top: 45px;

padding-right: 47px;

}



span {

margin-right:-0.10em;

}



#header-banner {

float: left;

margin-bottom: 40px;

width: 68.0851%;

}

[Paulie_D]

Sorry, I don’t use Opera. What is flowing into the image?

Is this issue limited to Opera or is it a cross-browser issue?

Here is something I’ve knocked up: http://codepen.io/Paulie-D/pen/zpoGf

The span margin has been overdone so that you can see it is actually outside of the containing box.

[Author]

Posts