PKP Bugzilla – Bug 7019
Table of Contents - title text alignment issue
Last modified: 2013-01-10 10:47:38 PST
The vertical alignment of the title text is incorrect in the following case: templates/issue/issue.tpl - browser is WebKit-based (Chrome or Safari) - the title contains both a <sup> tag and an <i> or <em> tag that render on the same line of text (the problem is not apparent when the tags are on separate lines) - no abstract is available (title is not rendered as a link) This comes from the interaction of <tr valign="top"> and the <i> and <em> tag. When an abstract is present, the <a> link is rendered, and the text is rendered correctly. The most straightforward solution appears to be the addition of a <div> tag directly under the <td> element, as follows (line 83 of issue.tpl): <td class="tocTitle"><div>{if !$hasAccess || $hasAbstract}<a href="{url page="article" op="view" path=$articlePath}">{$article->getLocalizedTitle()|strip_unsafe_html}</a>{else}{$article->getLocalizedTitle()|strip_unsafe_html}{/if}</div></td> I believe this is the complete list of affected files: templates/issue/issue.tpl: (as above) templates/author/submission/management.tpl: <tr valign="top"> <td width="20%" class="label">{translate key="article.title"}</td> <td width="80%" colspan="2" class="data">{$submission->getLocalizedTitle()|strip_unsafe_html}</td> </tr> templates/gateway/lockss.tpl: <tr valign="top"> <td class="label">Title</td> <td class="value">{$journal->getLocalizedTitle()|escape}</td> </tr> templates/manager/reviewForms/reviewForms.tpl: <tr valign="top" id="reviewform-{$reviewForm->getId()}" class="data"> <td class="drag">{$reviewForm->getLocalizedTitle()|escape}</td> ... </tr> templates/manager/sections/sections.tpl: <tr valign="top" id="section-{$section->getId()}" class="data"> <td class="drag">{$section->getLocalizedTitle()|escape}</td> ... </tr> templates/reviewer/submission.tpl: <tr valign="top"> <td width="20%" class="label">{translate key="article.title"}</td> <td width="80%" class="value">{$submission->getLocalizedTitle()|strip_unsafe_html}</td> </tr> templates/rt/metadata.tpl: <tr valign="top"> <td>1.</td> <td>{translate key="rt.metadata.dublinCore.title"}</td> <td>{translate key="rt.metadata.pkp.title"}</td> <td>{$article->getLocalizedTitle()|strip_unsafe_html}</td> </tr> templates/rt/metadata.tpl: <tr valign="top"> <td>11.</td> <td>{translate key="rt.metadata.dublinCore.source"}</td> <td>{translate key="rt.metadata.pkp.source"}</td> <td>{$currentJournal->getLocalizedTitle()|escape}{if $issue}; {$issue->getIssueIdentification()|strip_unsafe_html|nl2br}{/if}</td> </tr> templates/search/searchResults.tpl: <tr valign="top"> ... <td width="30%">{$article->getLocalizedTitle()|strip_unsafe_html}</td> ... </tr> templates/search/titleIndex.tpl: <tr valign="top"> ... <td width="35%">{$article->getLocalizedTitle()|strip_unsafe_html}</td> ... </tr> templates/sectionEditor/selectReviewForm.tpl: <tr valign="top"> <td>{$reviewForm->getLocalizedTitle()|escape}</td> </tr>
Created attachment 3694 [details] Screenshot of problem
Charles, have you tried this with other browsers? I wonder if that isn't a WebKit bug. If so, it would be worth tracking it down to a WebKit bug entry and determining what their plans are. If it's transient and doesn't affect many released versions, I would rather not pollute our markup with a work-around.
(In reply to comment #2) > Charles, have you tried this with other browsers? I wonder if that isn't a > WebKit bug. If so, it would be worth tracking it down to a WebKit bug entry and > determining what their plans are. If it's transient and doesn't affect many > released versions, I would rather not pollute our markup with a work-around. Firefox 9 and Internet Explorer 9 do not exhibit this behavior, but Chrome and Safari do.
Created attachment 3701 [details] Minimal example of the problem and solution. Whether or not it is a bug in WebKit or one of the other browsers, the problem can be fixed by ensuring the content of these TD elements is wrapped in a block-level element.
This is a webkit bug, see here: https://bugs.webkit.org/show_bug.cgi?id=68100 I've tried to workaround using css, but the best I could get was this: @media screen and (-webkit-min-device-pixel-ratio:0) { sup { display:inline-block; vertical-align:top; margin-top:-0.35em; } sup:before { content:""; line-height:2.06em; } } The first line is just a conditional so only webkit based browsers will consider this css. Basically I had to simulate the correct position of the superscript text and also to change the line height to better accommodate it. The vertical-align set to top align everything back to the same vertical position and then the negative margin-top will superscript the text inside the sup tag. But because of the top alignment, there will be an slightly difference in the whole text vertical position (maybe 3 pixels higher) between webkit browsers and the others, so I don't think it's a good solution that we can use. I can't think of anything better to do, and again, this is a webkit bug, so I would wait until they fix that.
Thanks, Bruno. Charles, I hope Bruno's CSS above will give you something to work with if you'd like to include a work-around on your own install. Since this is a known Webkit regression, and since there isn't an easy, non-invasive workaround, I suggest we wait for the webkit folks to fix it.