RE: [WSG] Is it possible to style an attribute?
For an tooltip you could look at: http://www.websemantics.co.uk/resources/styled_accessible_tooltips/ But maybe this would better suit: http://www.websemantics.co.uk/resources/accessible_ajax_glossary/ Regards mike foskett www.websemantics -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Grant Bailey Sent: 20 December 2011 04:38 To: wsg@webstandardsgroup.org Subject: [WSG] Is it possible to style an attribute? Hello, I was wondering if anyone could clarify whether it is possible to style an attribute. I realise this sounds odd, so allow me to explain what I wish to do. In my web page there are a number of terms that need to be defined. I like the user to be able to hover over the term and get the definition that way. For example: dfn title=Made famous in the #8216;Star Trek#8217 TV seriesteleportation/dfn ... produces Made famous in the 'Star Trek' TV series ... when the user hovers over the defined term 'teleportation'. I would prefer the words 'Star Trek' to appear in italics instead (yes, I am fussy). Is there any way to do this? I would be grateful for responses. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Is it possible to style an attribute?
You can always check something from css3 goodies:
a:before {
content: attr(title) : ;
}
*Kristaps Ancāns*
*
*
Senior front-end developer (coder)
Mob.: +34 644340683
E-pasts: kristaps.anc...@gmail.com
Skype: kristaps.ancans
Web: fyfi.net, metalguide.org http://www.metalguide.org, motorolleri.lv,
t3hwin.com
On Tue, Dec 20, 2011 at 10:40, Foskett, Mike mike.fosk...@uk.tesco.comwrote:
For an tooltip you could look at:
http://www.websemantics.co.uk/resources/styled_accessible_tooltips/
But maybe this would better suit:
http://www.websemantics.co.uk/resources/accessible_ajax_glossary/
Regards
mike foskett
www.websemantics
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Grant Bailey
Sent: 20 December 2011 04:38
To: wsg@webstandardsgroup.org
Subject: [WSG] Is it possible to style an attribute?
Hello,
I was wondering if anyone could clarify whether it is possible to style
an attribute. I realise this sounds odd, so allow me to explain what I
wish to do.
In my web page there are a number of terms that need to be defined. I
like the user to be able to hover over the term and get the definition
that way. For example:
dfn title=Made famous in the #8216;Star Trek#8217 TV
seriesteleportation/dfn
... produces
Made famous in the 'Star Trek' TV series
... when the user hovers over the defined term 'teleportation'.
I would prefer the words 'Star Trek' to appear in italics instead (yes,
I am fussy). Is there any way to do this?
I would be grateful for responses.
Thank you and kind regards,
Grant Bailey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8
9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Is it possible to style an attribute?
On 12/19/11 10:47 PM, Benjamin Hawkes-Lewis wrote: On Tue, Dec 20, 2011 at 4:38 AM, Grant Bailey wrote: Hello, I was wondering if anyone could clarify whether it is possible to style an attribute. I realise this sounds odd, so allow me to explain what I wish to do. In my web page there are a number of terms that need to be defined. I like the user to be able to hover over the term and get the definition that way. For example: dfn title=Made famous in the#8216;Star Trek#8217 TV seriesteleportation/dfn ... produces Made famous in the 'Star Trek' TV series ... when the user hovers over the defined term 'teleportation'. [...] In general, I'd strongly recommend putting your definitions in plain view, along with anything else users might want to read: dfnteleportation/dfn, made famous in theciteStar Trek/cite TV series Simple, robust, understood. [...] Expanding on Benjamin's good suggestion, if your intent is to avoid cluttering the main text with these definitions, you could put them into a margin to one side of the text. (Sidenotes.) I stole this idea from Robert Bringhurst's The Elements of Typographic Style. Lots more ideas relevant to web page layout in that book. :) -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Is it possible to style an attribute?
Hello, I was wondering if anyone could clarify whether it is possible to style an attribute. I realise this sounds odd, so allow me to explain what I wish to do. In my web page there are a number of terms that need to be defined. I like the user to be able to hover over the term and get the definition that way. For example: dfn title=Made famous in the #8216;Star Trek#8217 TV seriesteleportation/dfn ... produces Made famous in the 'Star Trek' TV series ... when the user hovers over the defined term 'teleportation'. I would prefer the words 'Star Trek' to appear in italics instead (yes, I am fussy). Is there any way to do this? I would be grateful for responses. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Is it possible to style an attribute?
Hi Grant I assume you want to show a text as a title or alt tag, for this preferred to use jquery tooltip here you can show the text or text with image in short you can show anything on hover the link. Try to use tooltip instead of title or alt tag. Regards Birendra -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Grant Bailey Sent: Tuesday, December 20, 2011 10:08 AM To: wsg@webstandardsgroup.org Subject: [WSG] Is it possible to style an attribute? Hello, I was wondering if anyone could clarify whether it is possible to style an attribute. I realise this sounds odd, so allow me to explain what I wish to do. In my web page there are a number of terms that need to be defined. I like the user to be able to hover over the term and get the definition that way. For example: dfn title=Made famous in the #8216;Star Trek#8217 TV seriesteleportation/dfn ... produces Made famous in the 'Star Trek' TV series ... when the user hovers over the defined term 'teleportation'. I would prefer the words 'Star Trek' to appear in italics instead (yes, I am fussy). Is there any way to do this? I would be grateful for responses. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Is it possible to style an attribute?
I was wondering if anyone could clarify whether it is possible to style an attribute. Hi Grant, I use a jQuery plugin called cluetip for my CMS admin screens. It will do what you want. Here is the link: http://plugins.learningjquery.com/cluetip/ Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Is it possible to style an attribute?
On Tue, Dec 20, 2011 at 4:38 AM, Grant Bailey
grant_malcolm_bai...@westnet.com.au wrote:
Hello,
I was wondering if anyone could clarify whether it is possible to style an
attribute. I realise this sounds odd, so allow me to explain what I wish to
do.
In my web page there are a number of terms that need to be defined. I like
the user to be able to hover over the term and get the definition that way.
For example:
dfn title=Made famous in the #8216;Star Trek#8217 TV
seriesteleportation/dfn
... produces
Made famous in the 'Star Trek' TV series
... when the user hovers over the defined term 'teleportation'.
I would prefer the words 'Star Trek' to appear in italics instead (yes, I am
fussy). Is there any way to do this?
While superficially attractive, @title is a problematic tool to use
for inline progressive disclosure of definitions because:
* It cannot store text structure (such as changes of voice or language).
* User agents do a terrible job of providing universal access to
information in @title. Popular user agents do not allow users to
access @title content using the keyboard (or a switch access device)
alone. Some user agents truncate long @title content. Popular screen
readers do not read @title on arbitrary elements - normally only on
abbr, acronym, img, and interactive controls like a, and then
depending on configuration.
In general, I'd strongly recommend putting your definitions in plain
view, along with anything else users might want to read:
dfnteleportation/dfn, made famous in the citeStar
Trek/cite TV series
Simple, robust, understood.
For lengthier definitions, ordinary hyperlinks to a glossary on the
same page or a definition on another page are a tried and tested,
universally familiar, universally accessible progressive disclosure
pattern:
a href=teleportation.htmlteleportation/a
a href=#glossary-teleportationteleportation/a
a href=glossary.html#teleportationteleportation/a
Any deviation from either plain view or simple hyperlinks is going to
introduce unnecessary barriers to consuming your content.
Still, we can think about ways to make your content harder to consume,
if you like. ;)
You could build on the hyperlinks approach by using JS to extract the
HTML in the #teleportation fragment and display it when the term is
hovered.
Alternatively, you could build on the plain view approach with
something more complicated such as:
span class=term-defined
tabindex=0dfnteleportation/dfnspan class=definition, made
famous in the citeStar Trek/cite TV series/span/span
/* Distinguish the defined term so that users have some sort of hint
it might be a control. At least this gives users of caret navigation
a chance. */
.term-defined dfn {
border: 1px solid red;
padding: 3px;
}
/* Hide offscreen left to be read by screen readers. */
.term-defined .definition {
left: -9px;
position: absolute;
}
/* Show the definition on keyboard focus or hover. */
.term-defined:focus .definition,
.term-defined:hover .definition {
position: static;
}
Leaving aside the usability issues raised by your question and
focusing purely on the technicalities, you can extract and style
content in attributes using CSS generated content, e.g.:
dfn:hover:before { content: attr(title); }
However, you can't apply transform punctuation within the raw text
content into italics with CSS alone, for that you'd need JS too.
Hope that helps.
--
Benjamin Hawkes-Lewis
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
