Log in / Register

Forum › Bugs

Using ″ threw off my baseline alignment

Louis
I was working on a multi-column PDF, carefully aligning my baselines across columns and using just the right amount of padding for headings to ensure their heights were baseline multiples when I decided to replace the Lorem ipsum text with some actual text, including one use of an ampersand (&) which worked and one use of a prime character (inserted as a numeric HTML entity).

That pesky ″ has caused me no end of grief, to the point where for visual appearances only, I'm thinking of removing it from the text entirely and inserting it after the fact, absolutely positioned, in a separate text box div. This of course would be horrible for accessibility but I know of no other way to achieve this short of wrapping it with a span set to position: absolute, maybe. Ah yes, that seemed to work, but it does require an extra non-breaking space:

50<span style="position: absolute; margin-top: -1pt">″</span>&nbsp; multitouch screen


It'd be fantastic if we could ensure, in some future version, that no matter what we did, text would align to a set baseline grid, even if that causes extra spacing to appear. That said, it might still not help this particular problem, which seems to stem from the character going outside the line-height and having to adjust for that ...?
mikeday
Perhaps the character is coming from a different font to the rest of the text, with a different ascender:descender ratio. Can you check which fonts are being used in the generated PDF file? (eg. check Document Properties in your PDF viewer, or just run Prince with the --verbose flag).
Louis
Yep, it pulled in Times New Roman, Regular when I used the double-prime, but didn't when i left it out.

Still somewhat of a bug, as the exact same text was used in Adobe InDesign without hassle, thanks to its built-in baseline alignment option. It just somehow corrected for that automatically. I'm not entirely certain what glyph it used, but Arial's too short and Times' too round.

Ungh. I zoomed in on the InDesign export -- it somehow knew to use ” (double quotation mark) instead. Checking the original file ... it handily shows a ⍂-type character if I type a double-prime. Obviously I replaced that on autopilot and then promptly forgot I did so. Sigh.

Perhaps this should really be classified under “protect me from my stupidity” but beyond auto-baseline alignment, a mode for designers that highlights font fallbacks, baselines and other tidbits would be greatly appreciated. That said, it also sounds like something a PDF viewer like Adobe's should have ...

Ended up making my own alignment guides thanks to some SVG -- the following fails when zooming in Preview on Lion but works pixel precise in Adobe's Acrobat. Finally found a reason to use Acrobat, it seems! ;-)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>/* ... styles ... */
			* { vertical-align: top; line-height: 12pt; margin: 0; padding: 0; }
			@page { size: US-Letter; margin: 0 } /* 1 pc (pica) = 12 pt (points) */
			.backgroundgrid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -100; width: 100%; height: 100% }
</style></head>
<body>
		<svg:svg class="backgroundgrid" xmlns="http://www.w3.org/2000/svg" version="1.1" width="612pt" height="792pt" viewbox="0 0 612 792">
		  <svg:defs> 
		    <svg:pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
		      <svg:rect fill="#efefef" x="0" y="0" width="12" height="12"/>
		      <svg:rect fill="white" x="12" y="0" width="12" height="12"/>
		      <svg:rect fill="#efefef" x="12" y="12" width="12" height="12"/>
		      <svg:rect fill="white" x="0" y="12" width="12" height="12"/>
		    </svg:pattern>
		  </svg:defs>
		  <svg:rect fill="url(#grid)" x="0" y="1.8" width="612" height="792"/>
		</svg:svg>
<!-- content goes here ... ->
</body></html>