Log in / Register

Forum › Bugs

Linking to elements with an ID with percent-encoded characters

thespacecamel
Hi I have an element with an ID containing percent-encoded scii characters (eg "#%f0%9f%98%85", which is the sweaty-but-happy face emoji), and am wanting to link to it and show the page name (in a table of contents). But Prince isn't able to find the element's page, instead, it says it's on page 0 (see attachments).
Here's the HTML I'm using:

<html>
<head>
<style>
.toc li a::after {
	content: leader('.') target-counter(attr(href), page) !important;
}
.contents{
page-break-before:always;
}
@page {
	@bottom-right {
		content: counter(page)
	}
}
</style>
</head>
<body>
<h1>My Book</h1>
<h2>Table of Contents</h2>
<ol class="toc">
<li>
<a href="#%f0%9f%98%85">Chapter 1 (no work)</a>
</li>
<li>
<a href="#%%%">Chapter 2 (works)</a>
</li>
<li>
<a href="#f09f9885">Chapter 3 (works)</a>
</li>
</ol>
<div class="contents">
<div id="%f0%9f%98%85">
<h2>Chapter 1</h2>
</div>
<div id="%%%">
<h2>Chapter 2</h2>
</div>
<div id="f09f9885">
<h2>Chapter 3</h2>
</div>
</div>
</body>
</html>


My workaround is to remove the percent-encoded characters. But I'm wondering if there's a better fix?
  1. links test.html‎ 37.1 kB
  2. links test.pdf‎ 76.8 kB ‎
    Notice "Chapter 1" says page 0
mikeday
This doesn't look right:
<div id="%f0%9f%98%85">
<h2>Chapter 1</h2>
</div>

The ID isn't a URL, so there is no need to percent-encode it, you can just write:
<div id="😅">
<h2>Chapter 1</h2>
</div>

or use an entity reference:
<div id="&#x1F605"> 
<h2>Chapter 1</h2>
</div>
thespacecamel
Aha, thanks @mikeday. Yes replacing the ID with the entity reference worked.

It's a bit of a long story, but the data I'm working on is taking URLs and converting them into IDs. It sounds like I should undo the percent-encoding, and then replace that with an entity reference.