Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorjizepi
    • CommentTimeFeb 16th 2006 edited
     permalink
    I have a client who is publishing a printed document alongside a website. The website contains additional information to the printed document, and the client wants to identify on the website where information is additional to that provided in the printed document.

    The additional information could be extra paragraphs, additional sentences within paragraphs or even whole new pages. Also, in some cases, information on the web may be an expanded version of the printed document (ie rewritten in more detail).

    The additional information on the web is not more or less important than that in the printed document, it is just additional.

    My problem is that "normal" highlighting methods (subtle background color, text effects like italicizing etc) also draw the eye to the additional information in a way that distorts the importance of it. It makes it seem "special", more important. I need to find a way of "identifying" pieces of text, rather than "highlighting" them.

    I also need to do this using valid CSS.

    My initial thought was to show a faint vertical line to the left of the body content, eg:


    This is normal text which appears in
    | the printed document. However, this
    | sentence only appears on the website
    | and should be identified. This last
    sentence is in the printed document
    and should show as normal again.


    I am assuming I would put a <span class="additional"> (or equivalent) around the additional content, but can't find a way to achieve this effect.

    Does anyone have any ideas how this could be achieved, or other ways of identifying the additional content which may work?

    Many thanks,

    Mike
    • CommentAuthorKanashii
    • CommentTimeFeb 16th 2006
     permalink
    You can surround the additional text in spans as you have above and than use an additional stylesheet with its media type set to print. In this new stylesheet you can add a rule to hide the additional text thus when the page is printed the additional text will be witheld.

    Hope that helps,

    Matt
    • CommentAuthorjizepi
    • CommentTimeFeb 16th 2006
     permalink
    Thanks Kanashii, but they're not printing the printed document from the website, it's completely separate. They just want to identify on the web where they're providing additional information to the printed document.

    Mike
    • CommentAuthorKanashii
    • CommentTimeFeb 16th 2006
     permalink
    Ah i see, sorry I completely mis-understood. Perhaps you could use a very light dashed bottom border on the span class to give the text a light underline type effect. Not sure if it would suit the design though. Good luck.

    Take care,

    Matt
    •  
      CommentAuthortsk
    • CommentTimeFeb 16th 2006
     permalink
    if you are going with the <span> and faded border the way you can make it work is by defining

    span.aditional {
    display:block;
    /*rest of the code goes here*/
    }

    My question is why does the aditional text have to be highlighted? Do the printed documents point to the website for "aditional information" ? or is it just a client requirement?
    • CommentAuthorjizepi
    • CommentTimeFeb 16th 2006
     permalink
    tsk,

    Yes to both questions: the printed document points to the website for additional information; and the client insists we identify the additional content somehow.

    Trouble with display:block is that it removes the additional content from its context (ie it forces it to start on a new line). I really need something that can be used inline (ie within a paragraph) as well.

    I'll try the dotted underline, but I'm worried it'll give undue importance to the additional content.

    Mike
    • CommentAuthorMouldy
    • CommentTimeFeb 16th 2006
     permalink
    It may be easier to make the additional text look a little less important, ie emphasise the main text rather than the additional? Your lines down the side seem a good idea. Just remove them for the additional, perhaps?
    •  
      CommentAuthortsk
    • CommentTimeFeb 17th 2006
     permalink
    I like Moudly's idea on making the aditional text less eye-catching on the page, probably using a faded colour of the main one. This way your average visitor gets the bulk of the desired information but still notices that extra info. Placing that into an anchor tag (also for IE support) with a :hover atribute to emphasize it against the normal text on rollover could be a sollution.

    Also, how about some sort of icon placed in your content area that marks the existance of additional content where it resides and on pressing it, using moo.fx for an expanding container, reveal the extra content in the same paragraph.

    I also found Stu Nichols's show me some more... method quite useful in some applications simmilar to yours
Add your comments
    Username Password
  • Format comments as (Help)