Details
-
Suggestion
-
Resolution: Won't Fix
-
None
-
None
Description
NOTE: This suggestion is for Confluence Server. Using Confluence Cloud? See the corresponding suggestion.
The html used for rendering icon links is currently pretty ugly. Semantically incorrect and presents one of many Confluence violations of 508 compliance.
In addition to that the use of nobr class causes many issues (broken design) when content contains links that should wrap on a new line, but can't because of this class. See CONF-12207 and attached screen shot.
The patch attached to this JIRA represents modifications to atlassian-renderer needed to get rid of the ugly html and replace it with much cleaner CSS implementation of the same feature, which in addition to generating prettier code also allows links to wrap correctly when they are too long.
I'm attaching screenshots of various links before and after the patch to show that the result looks the same, but links wrap correctly.
Here is the difference in the html code:
before:
<p><span class="nobr"><a href="http://foo.com" rel="nofollow">foo<sup><img class="rendericon" src="/images/icons/linkext7.gif" alt="" align="absmiddle" border="0" height="7" width="7"></sup></a></span><br> <span class="nobr"><a href="/pages/createpage.action?spaceKey=SunWikis&title=foo&linkCreation=true&fromPageId=72548464" class="createlink">new link with title<sup><img class="rendericon" src="/images/icons/plus.gif" alt="" align="absmiddle" border="0" height="7" width="7"></sup></a></span><br> <span class="nobr"><a href="/pages/createpage.action?spaceKey=SunWikis&title=new+link&linkCreation=true&fromPageId=72548464" class="createlink">new link<sup><img class="rendericon" src="/images/icons/plus.gif" alt="" align="absmiddle" border="0" height="7" width="7"></sup></a></span><br> <span class="nobr"><a href="mailto:foo@foo.com" rel="nofollow">foo@foo.com<sup><img class="rendericon" src="/images/icons/mail_small.gif" alt="" align="absmiddle" border="0" height="12" width="13"></sup></a></span><br> <span class="nobr"><a href="/download/attachments/72548464/commSuiteLogo6_v2.gif?version=1">attachment<sup><img class="rendericon" src="/images/icons/link_attachment_7.gif" alt="" align="absmiddle" border="0" height="7" width="7"></sup></a></span></p> <p><span class="nobr"><a href="http://blogs.sun.com/blueprints" title="Read the Sun BluePrints Blog" rel="nofollow"><img src="/download/attachments/72548464/commSuiteLogo6_v2.gif" align="absmiddle" border="0"><sup><img class="rendericon" src="/images/icons/linkext7.gif" alt="" align="absmiddle" border="0" height="7" width="7"></sup></a></span><br> <span class="nobr"><a href="http://foo.com" rel="nofollow">looong ling that wraaaaaaaaaaaapsss on to a new line after it reeeeeaches the end of this line<sup><img class="rendericon" src="/images/icons/linkext7.gif" alt="" align="absmiddle" border="0" height="7" width="7"></sup></a></span></p>
after:
<p><a href="http://foo.com" class="icon-name-external icon-position-right">foo</a><br> <a href="/wikis/pages/createpage.action?spaceKey=test2&title=foo&linkCreation=true&fromPageId=10551298" class="icon-name-create icon-position-right">new link with title</a><br> <a href="/wikis/pages/createpage.action?spaceKey=test2&title=new+link&linkCreation=true&fromPageId=10551298" class="icon-name-create icon-position-right">new link</a><br> <a href="mailto:foo@foo.com" class="icon-name-mailto icon-position-right">foo@foo.com</a><br> <a href="/wikis/download/attachments/10289157/commSuiteLogo6_v2.gif?version=1" class="icon-name-attachment icon-position-right">attachment</a></p> <p><a href="http://blogs.sun.com/blueprints" title="Read the Sun BluePrints Blog" class="icon-name-external icon-position-right"><img src="/wikis/download/attachments/10289157/commSuiteLogo6_v2.gif" align="absmiddle" border="0"></a><br> <a href="http://foo.com" class="icon-name-external icon-position-right">looong ling that wraaaaaaaaaaaapsss on to a new line after it reeeeeaches the end of this line</a></p>
It might be even possible to drop the use of icon-position-* classes and define the image position directly in icon-name-* classes.
I wasn't sure which css file was the best place to stick the code in, so I picked master.css, which looked the best for this code.
Attachments
Issue Links
- relates to
-
- Closed
