13 replies [Last post]
z1p
Offline
Regular
Last seen: 17 years 8 weeks ago
Timezone: GMT-4
Joined: 2005-08-02
Posts: 11
Points: 0

I have searched the forums (and all over the internet) for this answer, but I cannot find it.

I have a site in which I sometimes use Greek words. When I type them out in my coding, I use the unicode code for each letter. I do NOT set the font family for the entire site, as I do not think it is necessary.

However, I do set the font family and size for the Greek words. I do this because I want to make them larger (easier to read) and I want the users' browsers to use a font that is basically on just about any computer around (so they don't have to go and download one).

I have been searching for quite some time and all I can find is how to format an entire paragraph. I don't want that. I want to use css formating to set the font family and size of a couple of words IN a paragraph without the breaks that come from a p or div tag. I'm getting tired of having to put a font tag for family and size around each word (unfortunately, a lot of the time, the words have english in between them). Any help would be much appreciated.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 17 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Using CSS to format one or more words but not whole pgraph

Can you use the method suggested in this article? Substituting the colorization of individual word(Drunk with your (font) specific requirements?

http://www.webcredible.co.uk/user-friendly-resources/css/different-link-text-colour.shtml

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

z1p
Offline
Regular
Last seen: 17 years 8 weeks ago
Timezone: GMT-4
Joined: 2005-08-02
Posts: 11
Points: 0

Using CSS to format one or more words but not whole pgraph

I will see what I can do. However, this is for a link. The Greek words in my document don't link to anything. They are simply text.

That is what has confused me the whole time. I just want to format a couple of words within a paragraph...not a whole paragraph, link or anything else.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Using CSS to format one or more words but not whole pgraph

You could try coding everything for your Greek words within <span> or even <pre> in the css. Then in the html put:
<p>This is the <span>Greek word</span> for such and such.</p>

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 17 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Using CSS to format one or more words but not whole pgraph

Kinda like this?

.greek {color: #c00; font-size: 20px; font-family: Helvetica;}

<div><span class=greek>This is a pretend Greek phrase</span> and this is not.</div>

Resulting in the attached pic:

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

z1p
Offline
Regular
Last seen: 17 years 8 weeks ago
Timezone: GMT-4
Joined: 2005-08-02
Posts: 11
Points: 0

Using CSS to format one or more words but not whole pgraph

I may try that too. I have just found another way...

in the head

<style type="text/css">

.greek {
font-family: "times new roman";
font-size: 150%
}

</style>

in the body

<p>A bunch of english words followed by <font
class="greek">my unicode for greek</font> and more english.</p>

That seems to work fine in Fx 1.06 and IE 6. I thought I tried that earlier, but it wouldn't work then.

Is this valid CSS (i.e. would a validator give it thumbs up)?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Using CSS to format one or more words but not whole pgraph

No don't use the font tag is's deprecated in favour of CSS styling. there is no point creating a class and then applying it to a deprecated tag.

Use the span tag as Loraine has suggested, it's for using with inline elements and for applying styling to text with.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

z1p
Offline
Regular
Last seen: 17 years 8 weeks ago
Timezone: GMT-4
Joined: 2005-08-02
Posts: 11
Points: 0

Using CSS to format one or more words but not whole pgraph

Ok. I will work on that and come back if I have more questions. One I already have is ....

what will the span arguement look like in the stylesheet?

and...

doesn't the div tag make a line break? I don't want a line break.

Edit: OK. I left the stylesheet the same, but instead of saying font class, I made it say span class, like this....

<p>english stuff <span class="grk">unicode greek code</span>

what i have read says I am supposed to say <span class=> and not just <span> like she did. i'm not using the div tag

it works fine in Fx and IE. is this correct?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Using CSS to format one or more words but not whole pgraph

The span element is an inline segregator. Its purpose is to figuratively set aside some inline content for special treatment. How you treat it is the point of ids, classes, and styles. So yes, <span class="grk">αγορα</span> is almost correct. More properly, you should also include the lang attribute, like so; <span lang="el" class="grk">αγορα</span>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Using CSS to format one or more words but not whole pgraph

Gary, we may be getting ahead of ourselves with things like' lan' on the element.

The span element is to inline elements what div is to block level elements, as such they have no function in themselves, they are empty vessels .

z1p, She ( I presume your talking about the cats mother here) hereafter whom shall be known as Lorraine, was indicating to you the use of the span tag in the phrase, it would be assumed that you would know to apply some form of styling to that tag be it inline or through a class selector, and indeed the post after fleshed out the detail for you.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Using CSS to format one or more words but not whole pgraph

I can't resist... she actually said

Quote:
try coding everything for your Greek words within <span>... in the css...

Her assumption was that you would know how to style the element in the css and then she further assumed you would know how to apply it, howsoever, it may be styled to the html.
Her assumptions were clearly a bridge (or two) too far and she extends her gracious thanks to the Time Lords, Hugo and Gary for adding flesh to the bare bones of what (for her) was an eerily succcinct reply.
She must go, her kitten has just thrown up (as they often do) :roll:

z1p
Offline
Regular
Last seen: 17 years 8 weeks ago
Timezone: GMT-4
Joined: 2005-08-02
Posts: 11
Points: 0

Using CSS to format one or more words but not whole pgraph

Thanks for all the help.

This is what I have done...

First of all, I have switched to using an external style sheet. I find it very helpful to keep all of my styles together.

For the Greek text, I have used the following style in the stylesheet:

.grk {
font-family: "times new roman", gentium, arial, times;
font-size: 150%;
}

I didn't put a generic family at the end simply because I don't see that being useful when I'm dealing with unicode greek. If anybody knows of one, let me know. Also, I put times in for Macs, but don't know if that helps or not.

When I need to set the font in my paragrah, I do as follows:

<p>Here is a bunch of english words flowing down the page. Then, all of the sudden here comes <span class="grk">all this odd looking unicode greek</span> before going back to English.</p>

I found this to work fine in Fx 1.0.6 and IE 6. I don't really have anything else to test it with at this point (except Lynx - lol), but this is not a high traffic page and I'm not too worried about it.

I will keep in mind the lang element. However, I choose to use css to eliminate having to type so much. Heck, I ended up doing a good bit more recoding with css once I figured out the Greek stuff. I think it rocks because you type a lot less.

Also...

The css I gave above, as well as all the other css on my external stylesheet, passes the W3C CSS validator. I only get a warning about the lack generic font info on the greek style. However, it does not fail the code.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 17 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Using CSS to format one or more words but not whole pgraph

Nice job, z1p.

For more information on this topic, you might be interested in:

http://www.stunicholls.myby.co.uk/menu/class.html

With this as a model, you could further style an individual greek word within a greek phrase, if you choose.

The answer to your question above, "doesn't the div tag make a line break?", is yes.

Simply replace examples of "div" with "p"; as you've already discovered.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Using CSS to format one or more words but not whole pgraph

Of course there is always the option to style using descendent selectors and to do away with having to use the class attribute in the markup span.

This would require that you could hook into a unique element class or ID such as:

div#content p span {font-family: "times new roman"; font-size: 150%;}

also it would require that the span was only being used for this set of styles but would save a little on coding.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me