Thanks, but.... not really, I'm not a wizard or a miracleworker or a coder. I'm a bit of an amateur at all this, but really... this is actually quite simple stuff for me still. I am definitely not a wizard at HTML/CSS/javascript/etc. I actually know just about enough to make one think that one knows it - kind of in the dangerous zone in a sense. I have no programming background either, didn't take any courses, etc. All my knowledge I have atm is basically selftaught in the span of ... a month? Maybe two? I really don't know that much about this stuff. =)
And really, in all honesty, anyone that knows a lil' bit of HTML and has seen the admin-panel of a VB could've come up with that, really. Now if color-customization is also necessary on both parts, it gets a lot more annoying if not simply impossible to do with BBcode alone. You'd need two or even three variables whereas BBcode only supports one. One for defining the superscript, one for defining the color of said superscript, and quite possibly another for defining the color of the subscript. You probably would end up having to use javascript to manipulate the DOM to move the parts into the proper elements for styling purposes. While I do know just a tiny bit of raw javascript, it by far would not be enough for this type of thing. I'd probably end up grabbing the whole toolbox that is jQuery, a javascript framework which takes the headache out of javascript. Bit of a drag loading up that file just for something like this though, not really efficient. =D But with that, I could do something like this:
Tag use:
Code:
User:
#color1/#color2
subscript(superscript)
VB-Internal:
Replacement:
Code:
<div class="rubybox">
<div class="rubycolors">{OPTION}</div>
<div class="rubytext">{VALUE}</div>
</div>
Wherein {OPTION} would be #color1/#color2.
And {VALUE} would be subscript(superscript).
Now jQuery to manipulate the DOM:
Code:
(function($){
$(document).ready(function(){
var color_top = "";
var color_bottom = "";
var text_top = "";
var text_bottom = "";
$(document).each(".rubybox",function(index){
color_top = $(this).children(".rubycolors").html().split("/")[1];
color_bottom = $(this).children(".rubycolors").html().split("/")[0];
text_top = $(this).children(".rubytext").html().split("(")[1].split(")")[0];
text_bottom = $(this).children(".rubytext").html().split("(")[0];
$(this).children("div").remove();
$(this).append($("<div></div>").addClass("rubytop").css("color", color_top).html(text_top));
$(this).append($("<div></div>").addClass("rubybottom").css("color", color_bottom).html(text_bottom));
});
});
})(jQuery);
And accompanying CSS should be easy enough:
Code:
.rubybox { display: inline-block; }
.rubytop { display: block; text-align: center; font-size: 8px; line-height: 0.7; }
.rubybottom { display: block; text-align: center; font-size: 10px; line-height: 1.0; }
All this is a bit over-kill for all intents and purposes though. =P
Anyway, for the explanation. What the above script does, is scan the page for any instance where the ruby-text is used. It then jumps in, reads out the values and contents, removes that content and replaces it with what I've shown up above but using the colors the user would have supplied. So technically, if you wanted to have your superscript in red, and your subscript in black, it'd be:
Code:
#000/#F00
subscript(superscript)
I don't really think that this solution should be used though. It's really an ugly one, and if people start to spam instances of rubytext on a single page, it will slow down browsers a bit. Now with modern computers and all, it's not really that big a deal. However if suddenly there really are a lot of instances of it, even those will start to take a bit longer - to the point where you might even see the script replace these things. So all in all, I would not go for giving the option of specific colorization to the user. It causes too much overhead and over-complicates matters. The first solution I gave is sufficient really.
If however - while using the first solution! -, you happen to already have colored a part of the text, it will of course inherit said color and apply it to both sections. That's kind of the nature of HTML anyway. The only drawback of this type of implementation is that it will lead to some spacing issues of course. If you use the rubytext mid-paragraph, it will force a bit more whitespace between its line and the one above it. Doubt it matters, but hey - it's a side-effect. Then again it beats the value(option) method of writing I suppose?
( Not sure why I gave the advanced solution now... pfftt... keep it at 'for the lulz' I guess. ¬_¬' )