Bug 7019 - Table of Contents - title text alignment issue
Table of Contents - title text alignment issue
Status: RESOLVED WONTFIX
Product: OJS
Classification: Unclassified
Component: User Interface
2.4.2
All All
: P3 minor
Assigned To: beghelli
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-01-14 10:36 PST by Charles Parker
Modified: 2013-01-10 10:47 PST (History)
1 user (show)

See Also:
Version Reported In:
Also Affects:


Attachments
Screenshot of problem (11.17 KB, image/png)
2012-01-14 10:37 PST, Charles Parker
Details
Minimal example of the problem and solution. (841 bytes, text/html)
2012-01-19 07:51 PST, Charles Parker
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Charles Parker 2012-01-14 10:36:04 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>
Comment 1 Charles Parker 2012-01-14 10:37:25 PST
Created attachment 3694 [details]
Screenshot of problem
Comment 2 Alec Smecher 2012-01-19 06:11:35 PST
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.
Comment 3 Charles Parker 2012-01-19 07:23:11 PST
(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.
Comment 4 Charles Parker 2012-01-19 07:51:22 PST
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.
Comment 5 beghelli 2013-01-10 10:40:19 PST
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.
Comment 6 Alec Smecher 2013-01-10 10:47:38 PST
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.