Log in / Register

Forum › Bugs

Behaviour of text-indent on elements with ::before pseudoelements inconsistent with browsers

David J Prokopetz
Consider the following test case:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul {
	margin-left: 4em;
	padding-left: 0pt;
}
li {
	margin-left: 0pt;
	padding-left: 0pt;
	list-style-type: none;
	position: relative;
}
.indent {
	text-indent: 4em;
}
.marker::before {
	content: '>';
	display: block;
	position: absolute;
	left: -2em;
	background: yellow;
}
</style>
<head>
<body>
	<p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices ante in dui aliquet, non pretium metus dignissim. Curabitur aliquam in dui in convallis. In sit amet augue mi.</p>
	<p class="indent marker">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices ante in dui aliquet, non pretium metus dignissim. Curabitur aliquam in dui in convallis. In sit amet augue mi.</p>
	<ul>
		<li class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</cite> Duis ultrices ante in dui aliquet, non pretium metus dignissim. Curabitur aliquam in dui in convallis. In sit amet augue mi.</li>
		<li class="indent marker">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices ante in dui aliquet, non pretium metus dignissim. Curabitur aliquam in dui in convallis. In sit amet augue mi.</li>
	</ul>
</body>
</html>


When viewed in a browser (I've tested the latest Chrome and Firefox), both the content of the absolutely positioned ::before pseudoelement and the parent element's regular content have their first lines indented.

When rendered with Prince, only the content of the absolutely positioned ::before pseudoelement has its first line indented.

(In the interest of completeness, this issue came up in the context of applying a *hanging* indent to list elements with absolutely positioned pseudo-markers, but the non-hanging indent makes it easier to see what's actually going on.)

Edited by David J Prokopetz

David J Prokopetz
I suspect the issue may be that Prince isn't taking into account the fact that the ::before pseudoelement has been removed from the regular text flow via absolute positioning when determining what counts as "the first line" for the purpose of the text-indent property. In the case of a non-absolutely positioned block-displayed ::before pseudoelement, Prince's output is consistent with browsers.

Edited by David J Prokopetz