FreePgs.com Forum

FreePgs Related => Support Requests => Topic started by: sixthcrusifix on December 07, 2005, 09:10:09 PM

Title: CSS wont' work! Damn stroke attribute
Post by: sixthcrusifix on December 07, 2005, 09:10:09 PM
I have tried using:

filter:glow(color=000000;strength=4);

(maybe not that exactly but it was the right syntax, I got it off of a CSS website

And I've tried this:

stroke:000000;stroke-weight:0.3px;


And on Mozilla and IE niether of them work at all! I just want me damed text to have stroke so that I can see it next to my complicated background. (The reason is because a little bit of the text dissapears in a black spot)


Why aren't these working??? here's my style.css file if you need it:

Quote
<style type="text/CSS">
BODY {font-family:Century Gothic Bold;font-size:35px;font-weight:bold;color:ffffff;scrollbar-face-color:009800;background-image:url('BG_TEMP.jpg'); background-attachment:fixed;background-repeat:no-repeat;background-position:center;}
.ttl {color:af9090;font-size:25px;font-family:Century Gothic Bold;font-weight:bold;}
.area {background-color:cf5544;}
.title {color:00ff00;text-decoration:underline;font-size:30px;font-family:Century Gothic; }
.content {color:3333df;text-decoration:none;font-size:25px;}
A:link {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:dd3333}
A:hover {color:000000;text-decoration:underline;font-size:17px;font-family:Century Gothic Bold;background-color:ffff00}
A:active {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:000000}
A:visited {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:ff7878}
.COPYINFO {color:000000; text-align: center; font-size:12px;font-family:Century Gothic;stroke:#000000;stroke-width:1}
TABLE {border-color:af7500;}
TD {border-color:af7500}
.button {background-color:df9800;border-color:984511}

</style>
Title: Re: CSS wont' work! Damn stroke attribute
Post by: webzone (archived) on December 07, 2005, 09:36:03 PM
filter is a proprietary extension of Internet Explorer (Windows only). It is not implemented by any other browser.
stroke is designed to be used with SVG (Graphics Language), not with HTML.

Are you looking for text-decoration:line-through ?
Title: Re: CSS wont' work! Damn stroke attribute
Post by: sixthcrusifix on December 07, 2005, 09:56:07 PM
Quote from: webzone on December 07, 2005, 09:36:03 PM
filter is a proprietary extension of Internet Explorer (Windows only). It is not implemented by any other browser.
stroke is designed to be used with SVG (Graphics Language), not with HTML.

Are you looking for text-decoration:line-through ?

No, I want teh text to be outlines in a different color. like glow but solid, I thought that would be a basic funtion of CSS.


And even worse I just got this:

text-shadow:ffffff,3px,3px,3px;


from W3.org and it didn't work either! They should be kicked in the ass for giving me crap that doesn't work! What the hell!?
Title: Re: CSS wont' work! Damn stroke attribute
Post by: webzone (archived) on December 07, 2005, 10:48:28 PM
Text-shadow is a CSS 2.1 property that is actually only supported by the KHTML engine (Safari and Konqueror).
It is in the specs, but nobody has bothered to implement it in a browser yet.

I'm not sure I well understand what you want though. Do you want a shadow, a line through your text, or one around it (outline)?
Title: Re: CSS wont' work! Damn stroke attribute
Post by: sixthcrusifix on December 07, 2005, 10:52:29 PM
Quote from: webzone on December 07, 2005, 10:48:28 PM
Text-shadow is a CSS 2.1 property that is actually only supported by the KHTML engine (Safari and Konqueror).
It is in the specs, but nobody has bothered to implement it in a browser yet.

I'm not sure I well understand what you want though. Do you want a shadow, a line through your text, or one around it (outline)?

a line around it, outline. but I can't find that either.

And damn them! Microsoft and Mozilla need to get off their ass in implement it! Shadow would be cool too.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: webzone (archived) on December 07, 2005, 10:56:38 PM
A line around? That's possible.

You could use border (CSS 1).
Example: border:1px solid red;
Title: Re: CSS wont' work! Damn stroke attribute
Post by: Ben on December 08, 2005, 01:14:52 AM
the problem with the "world wide web" is that coding standards don't make it world wide.

Yeah, is border what you're talking about, or are you looking for something differant?
Title: Re: CSS wont' work! Damn stroke attribute
Post by: sixthcrusifix on December 08, 2005, 07:50:12 AM
Quote from: webzone on December 07, 2005, 10:56:38 PM
A line around? That's possible.

You could use border (CSS 1).
Example: border:1px solid red;

no no no no no no no my loves, my dears my darlings. What I'm looking for is called a stroke in technical terms. Lemmie open photoshop and give you an image. I want to type in black text and get this:


(http://img233.imageshack.us/img233/1962/untitled18jd.jpg) (http://imageshack.us)


That is black text with a red stroke (Stroke, border, outline -whatever you wanna call it)

Not trying to sound mean it's just that people keep misunderstanding me.

Thanks for reading you guys. :D
Title: Re: CSS wont' work! Damn stroke attribute
Post by: Ben on December 08, 2005, 03:52:03 PM
Something like this?

It's a BBCode on the forums, so it's gotta be possible. I'll look up in the source how its done.

Edit: It's done with this CSS: filter: Glow(color=red, strength=2);

Edit again: You've already tried it... well, I don't think there's another way, and if there is I don't know.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: brainiac744 on December 08, 2005, 05:38:56 PM
I had this exact same problem. What I ended up doing was writing a PHP script that generates a gif image with an outline around the text. If you want I can go and get the part of the code that outlines the text.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: sixthcrusifix on December 08, 2005, 06:22:38 PM
Quote from: nq2h on December 08, 2005, 03:52:03 PM
Something like this?

It's a BBCode on the forums, so it's gotta be possible. I'll look up in the source how its done.

Edit: It's done with this CSS: filter: Glow(color=red, strength=2);

Edit again: You've already tried it... well, I don't think there's another way, and if there is I don't know.

-Yea it only works in IE and on my IE it didn't even work (I've got 6 . . . )


Quote from: brainiac744 on December 08, 2005, 05:38:56 PM
I had this exact same problem. What I ended up doing was writing a PHP script that generates a gif image with an outline around the text. If you want I can go and get the part of the code that outlines the text.


hey that would be awsome.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: brainiac744 on December 08, 2005, 10:29:27 PM

<?php
//define some vars
    
if(!isset($_GET['size'])) $_GET['size'] = "26";
    if(!isset(
$_GET['text'])) $_GET['text'] = "Text";
    if(!isset(
$_GET['font'])) $_GET['font'] = "arial.ttf";
    if(!isset(
$_GET['stroke'])) $_GET['stroke'] = "1";


//find the x and y sizes
    
$size imagettfbbox($_GET['size'], 0$_GET['font'], $_GET['text']);

    
$xsize abs($size[0]) + abs($size[2] + 2);
    
$ysize abs($size[5]) + abs($size[1] + 2);

//create an image
    
$image imagecreate($xsize$ysize);
//set the background color
    
$blue imagecolorallocate($image00255);
//makes the background color transparent
    
imagecolortransparent($image$blue);
//set the text color
if (isset($_GET['r']) && isset($_GET['g']) && isset($_GET['b'])){
    
$font_color ImageColorAllocate($image$_GET['r'], $_GET['g'], $_GET['b']);
}
else {
    
$font_color ImageColorAllocate($image255,255,255);
}

//set the outline color
if (isset($_GET['or']) && isset($_GET['og']) && isset($_GET['ob'])){
    
$stroke_color ImageColorAllocate($image$_GET['or'], $_GET['og'], $_GET['ob']);
}
else {
    
$stroke_color ImageColorAllocate($image000);
}

// now draw out the outline (stroke) on the text
$stroke $_GET['stroke'];
for (
$ox = -$stroke$ox <= $stroke$ox++) {
for ($oy = -$stroke$oy <= $stroke$oy++) {
imagettftext($image$_GET['size'], 0abs($size[0])+$oxabs($size[5])+$oy, -$stroke_color$_GET['font'], $_GET['text']);
}
}

//print the text
    
imagettftext($image$_GET['size'], 0abs($size[0]), abs($size[5]), -$font_color$_GET['font'], $_GET['text']);

//set the type of image
//    header("Content-type: image/gif");
//barf out the image
    
imagegif($image);
//free up memory
    
imagedestroy($image);
?>



Just pasted the whole file.
You'll need to upload a ttf font and set it at the top or add it to the query like:
?font=something.ttf&text=blahblah&size=12&stroke=2

Obviously, you'll want to just set the defaults at the top to what you typically use.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: sixthcrusifix on December 09, 2005, 01:35:13 AM
Quote from: brainiac744 on December 08, 2005, 10:29:27 PM

<?php
//define some vars
    
if(!isset($_GET['size'])) $_GET['size'] = "26";
    if(!isset(
$_GET['text'])) $_GET['text'] = "Text";
    if(!isset(
$_GET['font'])) $_GET['font'] = "arial.ttf";
    if(!isset(
$_GET['stroke'])) $_GET['stroke'] = "1";


//find the x and y sizes
    
$size imagettfbbox($_GET['size'], 0$_GET['font'], $_GET['text']);

    
$xsize abs($size[0]) + abs($size[2] + 2);
    
$ysize abs($size[5]) + abs($size[1] + 2);

//create an image
    
$image imagecreate($xsize$ysize);
//set the background color
    
$blue imagecolorallocate($image00255);
//makes the background color transparent
    
imagecolortransparent($image$blue);
//set the text color
if (isset($_GET['r']) && isset($_GET['g']) && isset($_GET['b'])){
    
$font_color ImageColorAllocate($image$_GET['r'], $_GET['g'], $_GET['b']);
}
else {
    
$font_color ImageColorAllocate($image255,255,255);
}

//set the outline color
if (isset($_GET['or']) && isset($_GET['og']) && isset($_GET['ob'])){
    
$stroke_color ImageColorAllocate($image$_GET['or'], $_GET['og'], $_GET['ob']);
}
else {
    
$stroke_color ImageColorAllocate($image000);
}

// now draw out the outline (stroke) on the text
$stroke $_GET['stroke'];
for (
$ox = -$stroke$ox <= $stroke$ox++) {
for ($oy = -$stroke$oy <= $stroke$oy++) {
imagettftext($image$_GET['size'], 0abs($size[0])+$oxabs($size[5])+$oy, -$stroke_color$_GET['font'], $_GET['text']);
}
}

//print the text
    
imagettftext($image$_GET['size'], 0abs($size[0]), abs($size[5]), -$font_color$_GET['font'], $_GET['text']);

//set the type of image
//    header("Content-type: image/gif");
//barf out the image
    
imagegif($image);
//free up memory
    
imagedestroy($image);
?>



Just pasted the whole file.
You'll need to upload a ttf font and set it at the top or add it to the query like:
?font=something.ttf&text=blahblah&size=12&stroke=2

Obviously, you'll want to just set the defaults at the top to what you typically use.

awsomeness! YAY! By the way, if you want a certain font for your website, is there a way you can upload the ttf to your website so that even people who don't have teh font installed can see it??? Otherwise I've just been having to make images for stuff to be in cool fonts. (It'd be easy if Internet Explorer, the most popular browser, had better PNG support) .

Why isn't there an Internet Explorer 7.0 with full PNG transparency support, tabbed browsing, The Latest CSS and personalized security? You can get plugins for some of it but microsoft is so big I feel like they owe it to me to give me a better browser. I wish everyone in the world would just switch to firefox!
Title: Re: CSS wont' work! Damn stroke attribute
Post by: Ben on December 09, 2005, 02:00:27 AM
But updating IE requires WORK. Don't you know that Microsoft hires programmers that sit in the office all day and say
Fred: "Oh, we could do that. Get Bob to do it."
Bob replies "That's a good idea, put Fred on it".

Besides, IE 7 is supposed to be released with Windows Vista.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: sixthcrusifix on December 09, 2005, 02:36:05 AM
Quote from: nq2h on December 09, 2005, 02:00:27 AM
But updating IE requires WORK. Don't you know that Microsoft hires programmers that sit in the office all day and say
Fred: "Oh, we could do that. Get Bob to do it."
Bob replies "That's a good idea, put Fred on it".

Besides, IE 7 is supposed to be released with Windows Vista.

Vista? Sounds like some damned beach softdrink. is that the new OS? VERY gay sounding I hate it. But it will probably be better than XP and I'll have to upgrade because the new Adobe software will only be availale on it....

I hope somone breaks the window one of these days.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: brainiac744 on December 09, 2005, 02:44:35 AM
There is a way to set a specific font from the webserver for the browser to use. I remember reading about it but I don't remember where. I'll see if I can find that article again...
Title: Re: CSS wont' work! Damn stroke attribute
Post by: webzone (archived) on December 09, 2005, 02:51:09 AM
Quotef you want a certain font for your website, is there a way you can upload the ttf to your website so that even people who don't have teh font installed can see it???

You can do this using CSS and the WEFT tool by Microsoft. However, it will only work in Internet Explorer 5.x (or later) on Windows when the Security settings aren't set to High.

Edit : I believe this is part of the CSS 2.1 specs, but no other browser has implemented it yet. There is already a bug filed in Bugzilla (bug 52746 (https://bugzilla.mozilla.org/show_bug.cgi?id=52746)) to have it in Firefox and SeaMonkey.
Title: Re: CSS wont' work! Damn stroke attribute
Post by: brainiac744 on December 09, 2005, 03:51:11 AM
And here's a link with more information if you're still interested after that disclaimer that webzone made:

http://www.microsoft.com/typography/web/embedding/weft3/