Forum Bugs

URL wrapping

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?
You can use the text-replace property to add a zero width space after & characters:
p { prince-text-replace: "&" "&\200B" }
Thanks, Mike. You people sure are smart. I can think of lots of uses for that.
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 "/"?
Is the URL actually a link, eg. is it wrapped up in <a href="..">...</a>?
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 ( 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.


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?
Okay, we'll investigate this.
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 :

<style type="text/css">
p, ul {Overflow: hidden;}
#body {columns: 3; column-gap: 1em;}
@page {margin: .5in .5in .5in .5in; size: 8.5in 11in;}
<body><div id="body">
List: <ul><li><a href="">http://asdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkliytyretweqrdsgjhasdfgfhgfhkkl</a></li></ul>
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.

John Haugeland is

@bookdev is right when he says something is wrong with ul {overflow: hidden} in Prince. 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:
and the pertaining W3C recommendation:
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:
Here is my live example:
... with source code:
Neat! Glad it worked out, thanks for posting the helpful links. :)