Skip to content

Latest commit

 

History

History
83 lines (57 loc) · 3.58 KB

README.md

File metadata and controls

83 lines (57 loc) · 3.58 KB
Raw

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

Example Render

Getting Started

Via NPM:

npm install rubi-text --save

Example Code

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