Creating Text Styles

[Rick Altman]

I get it that .css files have no place with WYSIWYG web content development, but there are two things that I think I really need to have:

1. Define a cascade of typeface support -- i.e. First look for Arial, then Tahoma, then generic sans serif.

2. Create styles based on this and other definitions.

I think I can figure out how styles are handled: format a string of text and then use the Update Style command. And you can create parent/child relationships. All well and good, but is there no dialog box that lets you pick each style and change its properties? I can't find it.

And more important, can I define a cascade of typefaces for Normal Text so I can then use it as the basis for all other styles?

[Acorn]

Rick, CSS has a great presence and future within Xara design - I use it in lots of areas where interaction events are used.

I don't know how you would use typeface support, other than using CSS.
I would put

<style>
html, h1, h2, h3, .Normal_text {
    font-family: "Arial, Tahoma, sans-serif
}
</style>

into the Website > HTML Code (head).

I would carefully check how the text fitted.

However, I would use @font-face with my preferred font instead as this ensure the font is rendered even if it is not on the customer's browser.
It would usually be fine with headings. For paragraphs of text, i would allow some space on the right for overruns.

To change a style you apply it to some text, change the text to what you want and then update the style.

As paragraph styles are based on the underlying style (here, you pick Normal), it should work the way you are after.

Acorn

[Rick Altman]

Rick, CSS has a great presence and future within Xara design - I use it in lots of areas where interaction events are used.

I don't know how you would use typeface support, other than using CSS.
I would put

<style>
html, h1, h2, h3, .Normal_text {
    font-family: "Arial, Tahoma, sans-serif
}
</style>

into the Website > HTML Code (head).

I would carefully check how the text fitted.

However, I would use @font-face with my preferred font instead as this ensure the font is rendered even if it is not on the customer's browser.
It would usually be fine with headings. For paragraphs of text, i would allow some space on the right for overruns.

To change a style you apply it to some text, change the text to what you want and then update the style.

As paragraph styles are based on the underlying style (here, you pick Normal), it should work the way you are after.

Acorn

Thank you, Acorn -- I cannot find a Website > HTML Code dialog box. Where would I look for it?

[Acorn]

Rick, apologies. I meant Utilities > Web Properties... > Website, etc. (the chain link icon).
Acorn

[Rick Altman]

Rick, apologies. I meant Utilities > Web Properties... > Website, etc. (the chain link icon).
Acorn

Acorn, when I could not get that code to result in any changes whatsoever, I did a bit of further digging. I found this in the HTML code:

<link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>

And sure enough, in that folder are three .css files that are controlling many attributes, not to mention overriding the snippet of code that you suggested I insert.

So how does one control the content of those external .css files?

[Acorn]

Rick, your Xara application generates them each and every Export/Publish so you can't overwrite them.

The Xara way is to insert snippets of CSS into Placeholders as these are executed later and so overrule the externally linked files.

You could create your own: my_xr_main.css, my_xr_text.css & my_custom_styles.css. You would store these elsewhere and call them as above by placing them in the website's HTML Code (head) code box.

Acorn

[Rick Altman]

Rick, your Xara application generates them each and every Export/Publish so you can't overwrite them.

The Xara way is to insert snippets of CSS into Placeholders as these are executed later and so overrule the externally linked files.

You could create your own: my_xr_main.css, my_xr_text.css & my_custom_styles.css. You would store these elsewhere and call them as above by placing them in the website's HTML Code (head) code box.

Acorn

My bad -- I thought that my code was getting overwritten; it wasn't -- I misspelled the typeface! I tried it with Comic Sans instead (something that would be overt) and it worked. Thanks!

[Rob-Xar]

Rick, CSS has a great presence and future within Xara design - I use it in lots of areas where interaction events are used.

I don't know how you would use typeface support, other than using CSS.
I would put

<style>
html, h1, h2, h3, .Normal_text {
    font-family: "Arial, Tahoma, sans-serif
}
</style>

into the Website > HTML Code (head).

Using this would compete with the existing CSS code generated by Xara, however if you use the !important; parameter when changing the CSS, this would overwrite Xara's in priority: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Be careful though as the results can't be guaranteed. Because Xara positions everything pixel perfect, changing fonts would change the size of the span or div used, meaning some text will drop onto the next line and cause it to look out of place.

Rob

[Acorn]

Be careful though as the results can't be guaranteed. Because Xara positions everything pixel perfect, changing fonts would change the size of the span or div used, meaning some text will drop onto the next line and cause it to look out of place.

Rob

Rob, we still get this error with Xara and full justification so it would be useful that this bug is corrected.

Acorn

[Rob-Xar]

This is partly down to the way IE renders the text and Xara's handling. Simply add a space at the end of the word that drops down or right-click the text > Names and apply the name HTMLBlockText

Rob