Suggestion: Superscript annotations

**Counterguardian** · October 14th, 2011, 05:33 AM

Is there a way we can implement superscript annotations like phonetics (such as the above) in forum text?

It would be a pretty nifty feature to have for the translators and the bilinguals among us. And it would be nicely appropriate because Nasu likes to abuse it to hell and back.

**Counterguardian** · October 29th, 2011, 07:10 PM

Bump.

**Five_X** · October 29th, 2011, 07:49 PM

Could you just... type out something in Word/OpenOffice, then copy and paste it into the reply box?

**Counterguardian** · October 29th, 2011, 08:18 PM

It doesn't work.

好似这样(It ends up like this)

**Five_X** · October 29th, 2011, 09:26 PM

Hm.

**Lianru** · October 29th, 2011, 09:48 PM

You could type it in small font a line above?

**Counterguardian** · October 29th, 2011, 10:23 PM

That would be a workaround, but it would be a lot more trouble.

Plus page formatting will most likely displace it.

**Five_X** · October 29th, 2011, 11:00 PM

Like this
Like this

Mmmm... doesn't really work. Not enough difference between font sizes, I guess?

**Counterguardian** · November 22nd, 2011, 07:48 PM

Bumping again. =[

**Lianru** · November 22nd, 2011, 09:50 PM

:|
Admins have been busy for the past month, it seems.

**In-N-Out Double-Double & Animal Fries** · November 25th, 2011, 03:29 AM

Try using tables? It's an even bigger pain in the ass but it works

**Lianru** · November 25th, 2011, 10:12 AM

I am the bone of my sword

此身为剑而生

Works....kinda.

**Kotonoha** · November 25th, 2011, 11:39 AM

此身为剑而生(I am the bone of my sword)

...is what people do when rubytext is not possible, so yeah

**mewarmo990** · November 29th, 2011, 03:04 AM

AHHHHHHH SIMPLIFIED PROLETARIAT CHARACTERS

**Dreadnought** · December 7th, 2011, 04:11 PM

Pretty much been lurking around the boards for a while, decided to register up just for this.

This should actually be solvable quite easily with the use of a custom BBtag.
Ie something like this:

Code:

option
value

Would end up:
option
value
But with more styling of course.

Replacement would be the following html code (though needs a bit of tweaking really, this is just a really quick 'n dirty option).

Code:

<div style="display: inline-block;">
<div style="display: block; text-align: center; font-size: 8px; line-height: 0.7;">option</div>
<div style="display: block; text-align: center; font-size: 10px; line-height: 1;">value</div>
</div>

I'm not sure if people around these parts are all 'zomg must be webstandards compliant and backwards compatible all the way to IE6!'.
If that's the case, attaching classes instead for these divs will make it easier for styling purposes really.
You could then use conditional comments to make IE6/IE7 load up a different stylesheet overwriting the default values so those work too.
You'd be looking at a display:inline combined with zoom:1 option to make them properly use a display:inline-block.

Line-height and font-size settings can be fiddled with until it sort-of looks fine on most browsers, but I think this would be the result you guys are after.

Preview image of above code:

or with longer value:

or with longer option:

It might get a bit more complicated if one of the two has to get specific, user-defined, colors though.
I'm not too sure how VB would respond having a tag inside the option of another, probably wouldn't work.
Question would be though: is that necessary?

Hope this helps things along anyway.

**Five_X** · December 7th, 2011, 09:21 PM

ARE YOU A WIZARD?

**Lianru** · December 7th, 2011, 09:51 PM

HE'S A CODER
A MIRACLEWORKER
COUNTERGUARDIAN WHERE ARE YOU

**Dreadnought** · December 7th, 2011, 10:23 PM

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:
option
value

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. ¬_¬' )

**Counterguardian** · December 8th, 2011, 09:32 PM

This is amazing!

WE NEED THIS IMPLEMENTED. NOW!!!

**Dreadnought** · December 9th, 2011, 04:43 AM

Ehm... amazing? lol, ok... it took longer to type it out in a post than to actually come up with it.
In all honesty, that first one is basically about 5 mins time spent, the other one is 5 mins stacked on top of the first.

This really is just child's play, nothing special.

If you got any other problems with regards to codes, I might be able to help out with those too.

Thread: Suggestion: Superscript annotations

Thread Tools

Search Thread

Display

Suggestion: Superscript annotations

Posting Permissions