rubi-text

Rubi

Rubi characters are small superscript texts placed above or to the right of normal text. These characters are common in East Asian writings and serve a purpose in adding an extra pronunciation guide for unfamiliar readers. After seeing a twitter post by @mabelandtee, I developed a ReactJS concept component to deliver a similar result as Rubi characters, but for English.

Check out the Demo

For more information on Rubi Characters, check out this Wiki article

Getting Started

Via NPM:

npm install rubi-text --save

Copyable Code

import Rubi from 'rubi-text'

const App = () => <Rubi text="Kernel">Colonel</Rubi>

export default App

Properties

Prop	type	default	description	required
text	string	none	Your rubi text above the normal text	Yes
children	string	none	Your normal text	Yes
size	string	"12px"	Font size for your rubi text	No
offsetX	number	0	Offset rubi text on X-axis	No
offsetY	number	0	Offset rubi text on Y-axis	No
color	string	"initial"	Color of your rubi text	No
align	string	"center"	Aligns rubi text	No
justify	boolean	false	Justify Rubi text to width of normal text	No
lowerSpacing	boolean	false	Justify normal text to width of Rubi text	No
lowerCenter	boolean	false	Centers normal text to width of Rubi text	No
attachAfter	string	none	Add string after each char in normal text	No

Be sure to check out the example folder to see these properties in action.

FAQ

Will this support other writing systems?

Not sure. I have some experience in multilingual websites, but I'm open to contributions.

Why the name "Rubi"? It's really similar to the "Ruby" programming language.

No relation. "Ruby" or "Rubi" is just what it's called. I could have gone for "Ruby" but yeah, I'm pretty certain that's been taken.

Why did you build this?

I liked the concept and figured myself and other people would find it useful.

HTML5 already exists?

It does! And we actually use that here for semantic correctness. This component essentially makes it look better to write in your code. We also add several additional properties to improve readability.

Do you profit from this?

Nope. Would appreciate a follow, though. Twitter | Twitch

My Rubi characters are overlapping?

The Rubi text will require that you have a line-height set for your content. I've found that line-height: 32px works best at minimum.

Does this support mobile?

It does.

This looks kind of weird?

Of course. This isn't a standard in English writing systems. But it certainly makes it more interesting.

Can I contribute to this?

Yep. Make that pull request.

License

MIT © Technopathic