Hey Mike + guys,

I've been building headings with counters using the ::before pseudo element with content/counter but I can't seem to right align the ::before (ie IV), so that as the counter gets bigger and the marker gets wider, the characters expand to the left as opposed to the right. This is so that the text of the heading doesnt flow under the marker when the marker is big (ie "VII . ")

I also tried to just doing the counters myself using two divs in a "block formatting context" to have more control of the marker css. per this stackoverflow question:

http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width

But that behavior (side by side divs) doesn't seem to be supported on prince.

heres my code. And attached is the HTML + PDF from prince. Any clues on how i can go about doing this?

<style type='text/css'>
.h2-container{

}
.h2-marker{
    float: left;
	text-align: right;
	min-width: 100px;
	border: 2px solid blue;
}
.h2-text{
border: 1px solid red;
margin-left: 10px;
overflow: hidden;


}
</style>

	<div class='memo-text'>
		<h2 class="h2-container">
			<div class="h2-marker">
				III .
			</div>
			<div class="h2-text">
				Banh mi Carles pickled, 3 wolf moon semiotics freegan ennui. Echo Park Williamsburg retro, 3 wolf moon mumblecore seitan keytar slow-carb High Life vegan plaid artisan Truffaut freegan. Pop-up street art Pitchfork XOXO leggings Truffaut.
			</div>
		</h2>
		<h2 class="h2-container">
			<div class="h2-marker">
				IV . 
			</div>
			<div class="h2-text">
				this is my second heading
			</div>
		</h2>
	</div>

1. test.html‎ 1.2 kB
2. test.pdf‎ 30.3 kB

Is there a problem with test.pdf? It seems that if you make the number longer, like VIII, it is still right-aligned within the float and doesn't interfere with the heading text. Perhaps I am misunderstanding what you are trying to do.

Hey Mike,

Thanks for the quick response.

The problem in the pdf is that the heading text gets tucked under the number after the first couple of lines.

I've attached a screenshot, expected browser behavior on the right, and princexml behavior on the left.

Thanks again,

Andrew

1. screenshot.png‎ 150.5 kB

Any thoughts?

Could you just put a 110px left margin on .h2-text, and omit the overflow: hidden?

Dave

That works up until the marker width becomes wider than 110px. Which, with 12 pt font, is highly unlikely; but with larger font sizes, becomes more and more likely.

Given that we are planning to let the user change the font size at will, there will be a point where this breaks.

I'm going to use dauwhe's solution for now, but I feel like this, heading markers, is common enough that there should be a "real" solution out there. I may be wrong about that.

Thanks dauwhe!