How to add "arrow" for page links?

Follow

Eva Mayrhofer

September 10, 2015 14:02

Hello,

when I export my articles to PDF, I have the page number added to the links. That works beautifully.

However, I would like to have the added text and page number superscipted, in a smaller font and prefixed by an arrow or an image representing an arrow. As I have little knowledge about CSS, I did not manage to add the arrow. Does anyone have an tips how to do so?

Here is the CSS that works so far:

a.document-link:after {
content: "=> Page " target-counter(attr(href), page) "";
vertical-align: super;
font-size: smaller;
}

I would like to replace the characters "=>" by something "better". Thanks for all hints!

Cheers,
Eva

0

• 

  Stefan Kleineikenscheidt September 10, 2015 14:30

  Hi Eva,

  you can try UTF-8 arrow characters (e.g. http://www.fileformat.info/info/unicode/block/arrows/utf8test.htm): 

  Copy an arrow character into the content property (replace '=>').

  One catch though: The font may support that character or not. So you might have to try different characters.

  Hope this helps,
  -Stefan

   

  0

  Comment actions Permalink
• 

  Eva Mayrhofer September 11, 2015 06:43

  Hi Stefan,

  thanks for your quick hint. It helped a lot!

  Here is the modified CSS code:

  a.document-link:after {
  content: " (\2192P" target-counter(attr(href), page) ")"
  }

  We decided to drop the idea of a superscripted page number in a smaller font and to shorten the text "page" to "P".

  As I had already uploaded the font "Arial Unicode MS", the created PDF looks fine. See the attachment, if you are interested.

  Cheers,
  Eva

   

  
  
  
  ModifiedPageNoReference.png

  0

  Comment actions Permalink

Please sign in to leave a comment.