<wbr>

[Karellen]

I have a number of footnotes that contain long URL's. These long URL's force an empty line and extend past the right margin. (image)

I have read both Mozilla and W3Schools and the <wbr> seems pretty easy to use, but both the Calibre Check Book and the EpubCheck plugin flag this use as an error.

https://developer.mozilla.org/en-US/...ML/Element/wbr
https://www.w3schools.com/tags/tag_wbr.asp

This is how I have used it...

PHP Code:

<p class="footnote"><a id="p05c60j" href="p05c60.xhtml#p05c60i">§</a> http://news.bbc.co.uk/<wbr>1/hi/in_depth/<wbr>sci_tech/<wbr>2002/<wbr>leicester_2002/<wbr>partx2253636.stm. The BBC gives no scientific reference for the eight-degree claim.</p> 


Could someone please help me understand how to use <wbr> correctly.
Thanks

[KevinH]

You could try replacing them with the U+200B ZERO-WIDTH SPACE code point using numeric entities or the character itself.

Also try treating it as a self-closing xhtml element written as <wbr />

[Karellen]

Originally Posted by KevinH

You could try replacing them with the U+200B ZERO-WIDTH SPACE code point using numeric entities or the character itself.

Also try treating it as a self-closing xhtml element written as <wbr />

Hello KevinH, thanks for the reply.

I tried the self-closing tag <wbr/>. The Calibre Check Book is happy with that change, but the EpubCheck plugin still flags errors...

Spoiler:

p06c77.xhtml Line: 145 Col: 581 ERROR(RSC-005): Error while parsing file: element "wbr" not allowed anywhere; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")

Originally Posted by KevinH

You could try replacing them with the U+200B ZERO-WIDTH SPACE code point using numeric entities or the character itself.

Interesting, I didn't know about this. But this seems to work and solves the error flags. I'll stick with this method. It seems to work on the Libra2, but then I notice some of the URL's are wrapped at locations that has no no-space character, so I think the Libra2 does its own thing anyway.

[slm]

Are you sure that inserting a zero-width space won't foul up the URL for someone who tries to copy and paste it? (The <wbr> should disappear from a "text" copy/paste, automatically).

[KevinH]

You could just insert an anchor with href to that external url (with no added zero width spaces) and then use them only in the anchor description.

[KevinH]

Okay tested it. Support for the wbr tag came with html5 so it is part of epub3.

So I tried your test using epub3 and the <wbr /> tag and it nicely passes current EpubCheck.

Is there some reason you are still building new epubs as epub 2.0 versions?

Epub3 is the current valid epub spec and epub2 is now considered deprecated at best and by many to be obsolete. Epub3 can be made backwards compatible to work with older epub2 only e-readers. It is the leading epub format especially internationally. Epub3 is also a preferred format when converting an epub for the kindle.

There seems to be some resistance to moving to epub3 from some people on this site, but epub3 really is the right target to future proof any epub you are making.

[Karellen]

Originally Posted by slm

Are you sure that inserting a zero-width space won't foul up the URL for someone who tries to copy and paste it? (The <wbr> should disappear from a "text" copy/paste, automatically).

I am not worried about that due to link rot. All the URL's are dead. But I did wonder that myself and just assumed I could overcome that with a href.

Originally Posted by KevinH

Okay tested it. Support for the wbr tag came with html5 so it is part of epub3.

So I tried your test using epub3 and the <wbr /> tag and it nicely passes current EpubCheck.

Is there some reason you are still building new epubs as epub 2.0 versions?

Epub3 is the current valid epub spec and epub2 is now considered deprecated at best and by many to be obsolete. Epub3 can be made backwards compatible to work with older epub2 only e-readers. It is the leading epub format especially internationally. Epub3 is also a preferred format when converting an epub for the kindle.

There seems to be some resistance to moving to epub3 from some people on this site, but epub3 really is the right target to future proof any epub you are making.

Ok, its part of epub3. Thank you for checking.

The only reason I am using epub 2.0 is that the ebooks I have here are all epub 2.0 format, so I never really worried about upgrading as they all seem to work quite nicely on my Libra 2.

But now I am starting to see limitations, like the <wbr> and <s></s> within a <p> tag (why?), and others I have come across that I don't remember this very minute. Plus with your comments I now think it is time to convert to epub 3, so I'll do just that on my next ebook fix.

Is there a handy reference of differences between epub 2 and 3. Yes, I can do a search, but just in case you know of a great and simple reference.

I wonder why it is that every book I have is epub2. Maybe its something in my convert settings in Calibre. I'll have a hunt around.

Thanks

[KevinH]

Sigil has a plugin called ePub3-itizer that can convert epub2 epubs to epub3. I am positive Calibre can do exactly the same thing using an internal menu or command but they named it funny, something along the lines of "updating" or "upgrading" your epub. Best ask in the calibre forum and I am sure someone can point you to it.

As the author of Sigil's ePub3-itizer, I would be happy to summarize the conversion process steps if you have questions. Just ask.

[Quoth]

On Calibre, convert to epub and select epub3 in epub Output settings
But I've never found any need for epub3 with ordinary novels.

I've never seen <wbr /> A long URL can have short display text, though I prefer the visual text to match the URL. I've also started using QR codes with same URL underneath as my phone works with them on paper, OLED, LCD, eInk in real books, phones, tablets, monitors and eink. I set height to 80px and width to auto for small graphics and width to a suitable % and height to auto for large graphics.

[JSWolf]

Originally Posted by Quoth

On Calibre, convert to epub and select epub3 in epub Output settings
But I've never found any need for epub3 with ordinary novels.

I've never seen <wbr /> A long URL can have short display text, though I prefer the visual text to match the URL. I've also started using QR codes with same URL underneath as my phone works with them on paper, OLED, LCD, eInk in real books, phones, tablets, monitors and eink. I set height to 80px and width to auto for small graphics and width to a suitable % and height to auto for large graphics.

Is 80px large enough for a 300dpi 6" screen? I would think that's going to be rather small.

[Karellen]

Originally Posted by KevinH

Sigil has a plugin called ePub3-itizer that can convert epub2 epubs to epub3. I am positive Calibre can do exactly the same thing using an internal menu or command but they named it funny, something along the lines of "updating" or "upgrading" your epub. Best ask in the calibre forum and I am sure someone can point you to it.

As the author of Sigil's ePub3-itizer, I would be happy to summarize the conversion process steps if you have questions. Just ask.

Thank you. I appreciate the help.

I have found the epub3 setting in
Preferences>Output Options>EPUB output>EPUB version and changed it to v3 as default

The convert setting is in the Editor: Tools>Upgrade Book Internals.

Just about finished reading my current book, so I'll use v3 for the next book I fix.

[Karellen]

Originally Posted by Quoth

I set height to 80px and width to auto for small graphics and width to a suitable % and height to auto for large graphics.

Looks like that won't work in epub v3

From...
https://developer.mozilla.org/en-US/...ML/Element/img

Use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.

width: The intrinsic width of the image in pixels. Must be an integer without a unit.

height: The intrinsic height of the image, in pixels. Must be an integer without a unit.

[jhowell]

Originally Posted by Karellen

Looks like that won't work in epub v3

From...
https://developer.mozilla.org/en-US/...ML/Element/img

Use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.

width: The intrinsic width of the image in pixels. Must be an integer without a unit.

height: The intrinsic height of the image, in pixels. Must be an integer without a unit.

That refers to the width and height attributes, not the CSS properties of the same name.

[Karellen]

Originally Posted by jhowell

That refers to the width and height attributes, not the CSS properties of the same name.

Oops, I misunderstood.
Thanks

[Quoth]

Yes, I use css, not the HTML. The HTML img tag has the css class. Some examples:

.pic_half {
  padding-top: 3pt;
  height: auto;
  width: 50%
}

.pic_small {
  padding-left: 3pt;
  padding-right: 3pt;
  padding-top: 3pt;
  height: 80px;
  width: auto
}

.pic_wide {
  padding-top: 3pt;
  height: auto;
  width: 75%
}

Several pic_small can be on same line, hence L & R padding.
pic_half and pic_wide are intended for single images per paragraph.
I don't put text in the same paragraph.