Highlighted

cfhtmltopdf unordered list indent oddity

Community Beginner ,
Jun 03, 2020

Copy link to clipboard

Copied

Considering the following HTML:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<ul><li>normal text</li><li style="text-indent: 4em">another text</li><li style="text-indent: 4em">some other text</li></ul>


</body>
</html>

It renders in my browser (and WYSIWYG editor) like this:

MarsupialsDo_0-1591207510760.png

But it renders in the PDF produced by both cfdocument and cfhtmltopdf like this:

MarsupialsDo_1-1591207621518.jpeg

Any ideas for what I can do to get it to render consistently in the PDF?

 

Thanks in advance,

 

Leighton

 

Views

101

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

cfhtmltopdf unordered list indent oddity

Community Beginner ,
Jun 03, 2020

Copy link to clipboard

Copied

Considering the following HTML:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<ul><li>normal text</li><li style="text-indent: 4em">another text</li><li style="text-indent: 4em">some other text</li></ul>


</body>
</html>

It renders in my browser (and WYSIWYG editor) like this:

MarsupialsDo_0-1591207510760.png

But it renders in the PDF produced by both cfdocument and cfhtmltopdf like this:

MarsupialsDo_1-1591207621518.jpeg

Any ideas for what I can do to get it to render consistently in the PDF?

 

Thanks in advance,

 

Leighton

 

Views

102

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 03, 2020 0
BKBK LATEST
Adobe Community Professional ,
Jun 03, 2020

Copy link to clipboard

Copied

Perhaps it is doing that because text-indent is meant to style text blocks. Try using the margin or padding property instead. For example,

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<ul style="margin-left: 1em">
	<li>normal text</li>
	<li style="margin-left: 4em">another text</li>
	<li style="margin-left: 4em">some other text</li>
</ul>
</body>
</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2020 0