Implementing glow tags?

[bluestarultor]

I was just futzing around on FF Wiki playing with CSS and was once more reminded of the ability to put a glow effect on text. I've had the idea bumping around for ages, but every time it came to mind, I never asked. Implementing the tags would be pretty easy and the best part is the text and glow colors can be entirely separate.

I have an example set up on FF Wiki using both our post background colors: http://finalfantasy.wikia.com/wiki/User:Bluestarultor/Sandbox#For_me:

The code is pretty simple. All you need for a proper glow on NPF is four passes with the same color. The code I used is here:

<span style="color:white; text-shadow: 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF">This is a glow test.</span>

In a more general sense, the needed code to implement it here would be:

<span style="text-shadow: 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}">[text goes here]</span>


I just thought I'd throw that out there.


As a warning, it doesn't work in Explorer. IE has some other, much more complex, means of getting the same effect. I assume it works in most other browsers, though, since they're more CSS-compliant.

[synkr0nized]

Do you know the CSS required for IE to render this as well? I truly hate providing formatting that is not visible regardless of browsers, so if we had both and could drop in CSS that will handle it correctly depending on the client's browser that would be better (in my opinion).

[bluestarultor]

Do you know the CSS required for IE to render this as well? I truly hate providing formatting that is not visible regardless of browsers, so if we had both and could drop in CSS that will handle it correctly depending on the client's browser that would be better (in my opinion).

I'll have to do some research. I know it's possible from my classes, but I don't know if I still have the code bumping around somewhere. I'll post an edit.

[synkr0nized]

I know I have come across some CSS in pages that would have a section like "/* LOL IE Fix */ <some non-standard CSS here>", but those are often hacks.

I wonder if we do have or could make a conditional in our stylesheet declarations that adds an additional CSS file if the browser is IE. Anything redeclared in this file would overwrite the styles in the default CSS (if I am remembering this correctly) but only for IE.

Of course, that's a lot of fussing for just glowing text and would best help if we had a few different style discrepancies.

[bluestarultor]

Well, I found the code. Only issue is that it's Microsoft-specific and Wikia doesn't seem to play nicely with it, so I can't get it to show there. I CAN get it to show just making an HTML page, though.

https://dl.dropbox.com/u/466762/glowtest.html

Hopefully Dropbox fares better in that department.

Edit: Mind you, I did it in two span tags just because that didn't break my Wikia code. What I used was:

<SPAN STYLE="color: white; filter:progid:DXImageTransform.Microsoft.Glow(Colo r=#0080FF, Strength=2.75); height=1px"><span style="color:white; text-shadow: 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF">This is a glow test.</span></span>


BTW: Having that height thing in there is very important. It won't work without it.



Edit: HOKAY, looks like I've got it figured out!

<span style="text-shadow: 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}; filter:progid:DXImageTransform.Microsoft.Glow(Colo r={color}, Strength=3); height=1px">{text}</span>

The above generalized code should work in all instances. Also, I tweaked it from the example shown to look a bit better in Explorer.


Edit: And I updated the example for good measure. Yes, the radius is bigger in Explorer, but that's because there's no way to layer IE glows. The last one just overrides all the others. It's therefore darker and needs the extra pixel of radius to be more visible. Standard is actually five. I'm being generous space-wise with three, since the IE glow is treated as a solid object around the letters. I haven't tested what it'll do in-line in IE, but the method all other browsers use works out just fine, since the glow is treated as a separate object underneath the text. I'll be playing with it more.

[rpgdemon]

While we're shooting for some nice 90s-esque look, can I suggest implementing blink, too? :P

In all seriousness, cool stuff.

[bluestarultor]

While we're shooting for some nice 90s-esque look, can I suggest implementing blink, too? :P

In all seriousness, cool stuff.

I'm sure there's a way to do it, but I personally dislike blinking text because it makes it more of a hassle to read.

Marquees are pretty annoying, too.

[rpgdemon]

I'm sure there's a way to do it, but I personally dislike blinking text because it makes it more of a hassle to read.

Marquees are pretty annoying, too.

That is the point.

They actually deimplemented the blink tag, because of how obnoxious it was.

[bluestarultor]

Just to reiterate in case my numerous edits were missed late last night, here's code that should work:

<span style="text-shadow: 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}; filter:progid:DXImageTransform.Microsoft.Glow(Colo r={color}, Strength=3); height=1px">{text}</span>


Whether implementing it is a good idea or not is up to you guys. Like I said, I just wanted to throw it out there.

Heck, while I'm at it, I could throw together buttons for that, [glitter], and anything else you might want. I've gotten pretty efficient at that. XD

[rpgdemon]

If you're gonna be making all these, PLEASE, write up one for blink. I don't care how you go about implementing it, I want me some blink.

[bluestarultor]

If you're gonna be making all these, PLEASE, write up one for blink. I don't care how you go about implementing it, I want me some blink.

Dude, we already have [glitter] tags. We just don't have a button for them. ;)

Aside from that, while other browsers support blinking text, I believe you have to go through Javascript to do it in IE, which, while I could do it, may not be desirable to the admins.

At the moment, I'm not offering to supply the forum with every effect, since many of them are outright annoying. I just thought I'd offer one effect that's actually pretty cool since I was already playing with it. If the mods and admins would like to have an effect they don't already have, they can feel free to hit me up for it anytime.

[rpgdemon]

But, isn't the point of ANY text effect to be plain old annoying?

Seriously though, I feel like anything but actual text formatting is there just to bother people. (Marquees, et cetera) Why not give the people what they want, and constant annoyance?

[bluestarultor]

But, isn't the point of ANY text effect to be plain old annoying?

Seriously though, I feel like anything but actual text formatting is there just to bother people. (Marquees, et cetera) Why not give the people what they want, and constant annoyance?

Because I'm not forum staff. Not my decision, there, bub. :P

Just because I tossed up some code I basically already had doesn't mean it's going to get used. Synk showed an interest, but it would need shiney, Meister, or Fenris to implement it.

If the team decides they'd be willing to implement other effects, I'd happily work on the code for them. I just happened to already have some and was asking if they'd consider putting it in place.

[rpgdemon]

Because I'm not forum staff. Not my decision, there, bub. :P

Just because I tossed up some code I basically already had doesn't mean it's going to get used. Synk showed an interest, but it would need shiney, Meister, or Fenris to implement it.

If the team decides they'd be willing to implement other effects, I'd happily work on the code for them. I just happened to already have some and was asking if they'd consider putting it in place.

I know you're not, but no reason why you can't get a head start.

[bluestarultor]

I know you're not, but no reason why you can't get a head start.

*sigh*

I'm trying to be patient about this, rpg, but you're being rather rude. I did up the glow code elsewhere and decided to offer it here because I thought it might be nice. That doesn't obligate me to do more code on request. You're really coming off like you think you have a right to me making code YOU want. I would not be adverse to doing up more code in more of my free time, at my own leisure, but with no guarantee it will even be accepted, and with me having real-life obligations, I have other priorities. If the staff pre-approved adding the code, it would at least mean that my time doing the research and putting it together wouldn't be wasted when I really do not have time to waste, but as it stands, I have no indication of that.

If the staff likes the idea of adding flashing text, I'm open to discussion, but I'm not going out and spending extra time that I don't have doing up code that may not even be used. I offered code I had, plus a few things I knew wouldn't take me long. I did not offer my open services because I simply cannot afford to right now.

[Nikose Tyris]

one sec, I've got the blink text down pat, I think.

<blink> </blink>

There, that should work.

/endarguement.

Edit:
Protip- Marquee is the same thing.

[bluestarultor]

one sec, I've got the blink text down pat, I think.

<blink> </blink>

There, that should work.

/endarguement.

Edit:
Protip- Marquee is the same thing.

Marquee still works, but blink doesn't in IE, which is what the argument was over. I know from experience it takes Javascript to implement.

The issue is that Synk said it would be desirable if it worked across all browsers. Personally, I don't see why anyone still uses IE, since my experience with IE8 has been utter shit when I've been forced to use it, but if the demand is to support it on the forum, it'll take more work.

Edit: Apparently you can add the functionality to the tag itself in the CSS through a script as of IE5, unless it's been changed. On a break from homework ATM.

[Flarecobra]

Well, Firefox ain't the say-all for everyone. I've had some very bad exparances with FF, that I have not had with IE.

[bluestarultor]

Well, Firefox ain't the say-all for everyone. I've had some very bad exparances with FF, that I have not had with IE.

That still leaves Opera, Chrome, and Safari. ;)


In all seriousness, though, my main gripe with Explorer is as a developer due to its terrible CSS compliance. Microsoft sees fit to duplicate half of standard CSS in inane custom code. Heck, even basic things like margins vs. padding, which is used in literally every text element. It's fine to want to do your own thing, but that thing should at least be in addition to the standard, not to thumb your nose at it and make developers write two sets of code just to accommodate you at a basic level.

[rpgdemon]

Not to mention that some parts of IE's implementation is just plain broken. Last I checked, if you had a div and set one of the properties to align text centered, it'd align the div centered instead.

In any case, I apologize for being rude, but seriously, most of that was all a joke.

[shiney]

Yeah before becoming frustrated with people maybe you should wait for an admin or someone to weigh in on your contributions.

I'm not doin' that at this time though. Mainly 'cause, meh. I haven't even seen if anyone wants this beyond rpg saying "Well I guess, maybe this could be kinda neat."

[Nikose Tyris]

If we're looking for opinions, I think it looks neat, but it would be nice to be able to change the glow colour from blue to something different. Like Red.

Or Purple.

[shiney]

If we can possibly come up with a way to change the color then that would be the best option. It's not a bad idea, anyways, provided that potential is possible...

[bluestarultor]

If we're looking for opinions, I think it looks neat, but it would be nice to be able to change the glow colour from blue to something different. Like Red.

Or Purple.

If we can possibly come up with a way to change the color then that would be the best option. It's not a bad idea, anyways, provided that potential is possible...

The final code I came up with totally allows any color to be used. Once again, I'll repost it:

<span style="text-shadow: 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}; filter:progid:DXImageTransform.Microsoft.Glow(Colo r={color}, Strength=3); height=1px">{text}</span>

I was afraid it was going to get buried.

[shiney]

Yes but, does that allow the user to choose the color, or does it have to be hard-coded for each separate one? And did we determine that it is available across all browsers?

[Loyal]

How would the tag look, anyway? [glow="Red"]? [glow=rrggbb]?

[shiney]

I would likely try to mirror the code for the color tag. In fact I'll screw around with it a little and see if I can get anything going, I guess.

[bluestarultor]

Yes but, does that allow the user to choose the color, or does it have to be hard-coded for each separate one? And did we determine that it is available across all browsers?

I would likely try to mirror the code for the color tag. In fact I'll screw around with it a little and see if I can get anything going, I guess.

It's pretty much just that. You'd use it the same way as a color tag to choose the color of the glow. That's why I have the {color} placeholders in there. Same variable in each spot.


How would the tag look, anyway? [glow="Red"]? [glow=rrggbb]?

Barring anyone wanting to implement variable glow radii, yes, either one would work.

[Premmy]

I call dibs on posting in all glow text all the time if we do this.

[bluestarultor]

Okay, did some actual research. It looks like things need to be set up a bit differently than I actually have them, so this code should be the exact stuff that needs to be implemented:

<span style="text-shadow: 0 0 0.2em {option}, 0 0 0.2em {option}, 0 0 0.2em {option}, 0 0 0.2em {option}; filter:progid:DXImageTransform.Microsoft.Glow(Colo r={option}, Strength=3); height=1px">{param}</span>

I'm assuming when the manual says you can only have one option value that it means that the same value is used in all places. If this isn't true and the code breaks, well, there do seem to be means of allowing multiple options (http://www.vbulletin.org/forum/showthread.php?t=90869), but it seems like it would be a hassle over one tag.

That said, the only way to test it from this point forward is to implement it. The code should now be the exact value needed in the admin panel.