I notice that URLs with long query strings tend to run off the page in Prince instead of wrapping. I’m assuming there’s a rule that wraps URLs at the closest “/” which works for URLs without query strings. Could you please be so kind as to let me know it's possible to add to that rule “wrap at the closest “&” or “?” or to force wrapping on text that can't be hyphenated, if you don't mind?
Forum › Bugs
URL wrapping
You can use the text-replace property to add a zero width space after & characters:
p { prince-text-replace: "&" "&\200B" }
While that forces URLs to wrap, unfortunately it also breaks them. That is, if you click on the URL it treats the first line as the URL and ignores the rest. Therefore, the URL doesn't work. This doesn't happen when Prince wraps on "/" characters. Therefore, perhaps you could add it to the road map to wrap on other URL characters like ?&+_ in addition to "/"?
Yes, the URL is actually a link. However, the prince-text-replace inserts the &\200B in the link part and the display part both.
Hmm, that's not how prince-text-replace works; the URL should be embedded exactly as it appears. Can you email me (mikeday@yeslogic.com) a PDF that demonstrates the problem?
Mike, while your p { prince-text-replace: "&" "&\200B" } suggestion helped me wrap many URLs, I still have many like the one below that won't wrap and, therefore, ruin the PDF by running into adjoining columns and eventually right off the page.
Example: https://docs.google.com/fileview?id=0B4l-nvGOApEoNDU5NGUwNzgtYTYxNy00NjkyLWJjODYtZGUzMDE2YWMzODNi&hl=en
Could you please be so kind as to let me know if there's anyway to force Prince to wrap text in a multiple column layout that can't be hyphenated, if you don't mind?
Example: https://docs.google.com/fileview?id=0B4l-nvGOApEoNDU5NGUwNzgtYTYxNy00NjkyLWJjODYtZGUzMDE2YWMzODNi&hl=en
Could you please be so kind as to let me know if there's anyway to force Prince to wrap text in a multiple column layout that can't be hyphenated, if you don't mind?
Personally I would consider formatting a long unbreakable URL in some other way, such as placing it in a footnote at the bottom of the page where it has room to spread out, or something like that. Otherwise, the only option that springs to mind is using the new JavaScript support in Prince 8.0 to search through the document, find the URLs and insert zero width spaces after every character.
Thanks for the suggestions, Mike. Unfortunately, this problem can occur in any element on the page, not just URLs. Could we add CSS support for {word-wrap: break-word} to the road map, if that's not too much trouble?
Thanks, Mike. In the meantime, I discovered that p, ul {Overflow: hidden;} will truncate overflowing URLs. Strangely, it makes all list bullets invisible which is almost as bad. Any idea how to stop Prince from hiding the bullets when I do an overflow: hidden? (I tried body, div {Overflow: hidden;} instead but that didn't work.) My code is :
<html><head>
<style type="text/css">
p, ul {Overflow: hidden;}
#body {columns: 3; column-gap: 1em;}
@page {margin: .5in .5in .5in .5in; size: 8.5in 11in;}
</style>
</head>
<body><div id="body">
List: <ul><li><a href="">http://asdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkl</a></li></ul>
</div></body></html>
<html><head>
<style type="text/css">
p, ul {Overflow: hidden;}
#body {columns: 3; column-gap: 1em;}
@page {margin: .5in .5in .5in .5in; size: 8.5in 11in;}
</style>
</head>
<body><div id="body">
List: <ul><li><a href="">http://asdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkl</a></li></ul>
</div></body></html>
List bullets fall outside the list item content box, and so will be clipped. Web browsers behave the same way; if you place a border on the li element you will see the list bullet is outside the border. You may be able to hack around this by changing the ul/li/li::marker styles, I'm not sure.
OK. Thanks for the tip, Mike. I will continue searching for a way to stop text and tables from overflowing into the next column and ruining the PDF.
Whether a list bullet is inside or outside the list item's rendering box is actually undefined, and is a property question settled by the renderer's base stylesheet. The property in question is list-style-position.
You could, actually, do it with some magic around property selectors, a max-width, and two contained blocks, enabling one - the ellipsed name - when the selector matched real width to expected max width, and the other - the full name - when it was less. But that's hackish and silly.
You could, actually, do it with some magic around property selectors, a max-width, and two contained blocks, enabling one - the ellipsed name - when the selector matched real width to expected max width, and the other - the full name - when it was less. But that's hackish and silly.
John Haugeland is http://fullof.bs/
@bookdev is right when he says something is wrong with ul {overflow: hidden} in Prince.
http://stackoverflow.com/a/710264/2192488 should push the bullet list away from the float, but it does not. In other browsers like Firefox, Chrome and Opera this does work.
http://stackoverflow.com/a/710264/2192488 should push the bullet list away from the float, but it does not. In other browsers like Firefox, Chrome and Opera this does work.
Here is some more context: http://stackoverflow.com/a/16041390/2192488
and the pertaining W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
and the pertaining W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
OK, I finally solved the issue of lists overlapping left-floated images. Here is the minimal code:
ol, ul {margin-left: 1em;}
li {
position: relative;
left: 1.25em;
padding-right: 1.25em;
}
An explanation can be found here: http://stackoverflow.com/a/11904121/2192488
Here is my live example: http://hamwaves.com/capacitors/en/capacitors.a4.pdf
... with source code: http://hamwaves.com/capacitors/en/index.html
ol, ul {margin-left: 1em;}
li {
position: relative;
left: 1.25em;
padding-right: 1.25em;
}
An explanation can be found here: http://stackoverflow.com/a/11904121/2192488
Here is my live example: http://hamwaves.com/capacitors/en/capacitors.a4.pdf
... with source code: http://hamwaves.com/capacitors/en/index.html
