carriage return and styles display

[Régis Giudicelli]

Hi,
Is there a way to display the different styles used in the text and to see a symbol when there's a carriage return ? The best thing I did so far was to add background images to the styles of the css used in the editor so the users can alternatively use that css to see when they change their style, but it's not enough - I can only display the beginning OR the end of the styles, and I didn't find anything for the carriage return symbol

Thanks in advance,
R Giudicelli

[Tervel]

Hello Régis,

CSS can only be applied to HTML elements, and in fact - not even to all HTML elements.
We are not sure what you mean by carrige return in the context of HTML - as "\n" or "\r" symbols are simply ignored.

New lines in HTML are implemented either by block elements such as P, DIV - or alternatively by the <BR> element.

The <BR> element has no dimensions of its own, and it occupies no space - thus no visual CSS settings would be set to it.

If you provide us with more details about your scenario we would try to provide you with more meaningful suggestions that will help you achieve the desired effect.


Best regards,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Régis Giudicelli]

I'd like to do 2 things :
- the first is to symbolize where the title tags h1,h2... start and end. So far, I can symbolize where it begins OR where it ends by associating a tiny icon as background image to the style in the css... But is it possible to associate 2 images, one in the beguinning and one in the end, or to extend an image to the length of the style ?
- the second one is to symbolize the <br> which are in the text, to get a "word-like" look and to see where the carriage returns are (in my application, the carriage returns are <br>, I don't use the <p> tag

[Anders]

Régis: 

"But is it possible to associate 2 images, one in the beguinning and one in the end, or to extend an image to the length of the style ?" 

Yes, it is. You could apply the other background-image to the first letter of your heading, through the use of the pseudo class :before. Something like this: h1:first-letter {background:url(h.gif) no-repeat top left; padding-left:1em}

Styling of the br element is a harder thing to do, at least in regards to things such as color, backgrounds etc. I guess you would have to insert an element dynamically, through javascript, before, after or wrapping the br tags, and apply some styling to these elements instead. 

[Martin]

Hello Anders,

The usage of :before and :after is a good and elegant idea, however, these pseudo classes are still unsupported by Internet Explorer.

There is another way to add some styling of the type Regis has requested - by using :first-letter and background, for example:

h1
{
    background: url('EndImage.gif') no-repeat right center;
    padding-right: 1em;
}

h1:first-letter
{
    background: url('StartImage.gif' no-repeat left center);
    padding-left: 1em;
}

And yet more - you can do this with JavaScript - by using the IE insertAdjacentHTML method and its FireFox emulation with parsedNode / nextSibling,  but I guess that the best way is by CSS.

Best wishes,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Anders]

Martin,

yes, that was a typo on my part. As you see in my example i actually wrote h1:first-letter. There's also yet another pure css option: set the h1 or whatever to display:list-item, and then apply a list-style-image to it... Works well in IE as well. First-line is another pseudo class that is supported in IE...
This would allow us to sort of add six "background" images to an element in browsers that support the before and after pseudos. Kind of nice for a pure css solution!

But we're getting a bit off topic i guess :)