3

Being inspired by Is it possible to apply CSS to half of a character? I was wondering if something similar could be done with Indic text? As an example, in Sinhala ක + ා = කා (consonant + vowel). Is it possible to render the vowel stroke as a different colour from the base consonant? Other combinations:

ක + ෙ = කෙ
ක + ු = කු
ක + ො = කො
ක + ් = ක්
ම + ් = ම්
ම + ු = මු
ද + ා = දා
ක + ්‍ර = ක්‍ර
ර්‍ + ක = ර්‍ක
ක + ්‍ය = ක්‍ය
ර්‍ + ක + ්‍ර + ො = ර්‍ක්‍රො

I'm looking for an effect similar to this:

Black Sinhala letters with the vowel strokes in red

Thanks in advance for your awesome answers!

Community
  • 1
  • 1
CJ Dennis
  • 4,226
  • 2
  • 40
  • 69
  • 2
    Unlike the other question, which is based on a simple geometric problem, this one is completely dependent on the nature of combining glyphs themselves. I would be surprised if it were possible without using something like a custom font or a vector image. – BoltClock May 15 '14 at 01:32
  • As the author of the original question that you referenced, I think this is VERY interesting. I'll be keeping an eye on it to see if anyone can figure it out! If it goes for a while, I may even offer a bounty. :) – SimplyAzuma Jun 13 '14 at 15:28

2 Answers2

2

I've had a play with the code from the previous question and come up with this: Sinhala vowel strokes in colour http://experimental.haujuseiit.com/vowelstroke.html

If you go to the link you'll see that some combinations don't work but most of them do. The other issue is when the vowel stroke is completely or partially before the consonant. I've had to set explicit widths for "e" (yellow) and "ee" (dark green) which will probably break with different fonts.

I'll post the source code when I've automated the solution.

Improvements anyone?

Community
  • 1
  • 1
CJ Dennis
  • 4,226
  • 2
  • 40
  • 69
  • I've combined the halfStyle code to show the pronunciation in English at the bottom of the page :) – CJ Dennis Jul 07 '14 at 01:46
  • I've added some other Indic scripts to the page. I think it works as a proof of concept but the code could probably be cleaned up a bit. I like the `:after` & `:before` solution but I can't work out if it's possible to "centre" the consonant when the vowel stroke is on both sides. This is why I've used ``s instead. – CJ Dennis Jul 18 '14 at 02:38
0

As far as I know it is not possible to apply a css style to half a character, but I bet you could fake it using two z-indexed graphics, or even glyphs, of differing color. Using one to mask the other.

That would work, but would be a huge amount of work.

Rudees All Around
  • 51
  • 3