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:
Thanks in advance for your awesome answers!
I've had a play with the code from the previous question and come up with this:
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?
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.
Related
The code that generates SVG:
"<text x=\"" + (Width / 2) + "\" y=\"18\" width=\"30\" text-anchor=\"middle\" font-weight=\"Bold\" font-family=\"Simplex\" font-size=\"7\">" + "123" + "</text>"
The code is looped so it displays repeatedly
What's wrong with this text?
Conclusions:
centers the first digit
other elements start at the beginning of the element
When I remove the text-anchor, it changes a little but it still displays incorrectly
The problem is probably division by 2 (Width / 2)
You get a floating point value, which means that the separator is , instead of . in String Value
Use:
(Width / 2).ToString("0.00", CultureInfo.InvariantCulture)
I am using matchbox to insert images into text_flow which is working nicely, I need to do the same with small PDF charts - before I go down this path just wondering if its even possible ....Yes / No ?
sure, instead of fitting the image you just have to use the PDF page afterwards. So when you go the way of the following PDFlib Cookbook sample http://www.pdflib.com/pdflib-cookbook/text-output/wrap-text-around-images/ (case 4) but just place a PDI page instead of the fit_image():
x1 = p.info_matchbox(matchboxnames[m][0], i, "x1");
y1 = p.info_matchbox(matchboxnames[m][0], i, "y1");
width = p.info_matchbox(matchboxnames[m][0], i, "width");
height = p.info_matchbox(matchboxnames[m][0], i, "height");
p.fit_pdi_page(page, x1, y1,
"boxsize {" + width + " " + height +
"} fitmethod meet position=center");
I'm assuming it's not possible, but just in case it is or someone has a nice trick up their sleeves, is there a way to target certain characters using CSS?
For example make all letters z in paragraphs red, or in my particular case set vertical-align:sup on all 7 in elements marked with the class chord.
Hi I know you said in CSS but as everybody told you, you can't, this is a javascript solution, just my 2 cents.
best...
JSFiddle
css
span.highlight{
background:#F60;
padding:5px;
display:inline-block;
color:#FFF;
}
p{
font-family:Verdana;
}
html
<p>
Let's go Zapata let's do it for the revolution, Zapatistas!!!
</p>
javascript
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
});
};
$("p").highlight("Z","highlight");
Result
That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.
The only way to do it in CSS is to wrap them in a span and give the span a class. Then target all spans with that class.
As far as I understand it only works with regular characters/letters. For example: what if we want to highlight all asterisk (\u002A) symbols on page. Tried
$("p").highlight("u\(u002A)","highlight");in js and inserted * in html but it did not worked.
In reply to #ncubica but too long for a comment, here's a version that doesn't use regular expressions and doesn't alter any DOM nodes other than Text nodes. Pardon my CoffeeScript.
# DOM Element.nodeType:
NodeType =
ELEMENT: 1
ATTRIBUTE: 2
TEXT: 3
COMMENT: 8
# Tags all instances of text `target` with <span class=$class>$target</span>
#
jQuery.fn.tag = (target, css_class)->
#contents().each (index)->
jthis = $ #
switch #.nodeType
when NodeType.ELEMENT
jthis.tag target, css_class
when NodeType.TEXT
text = jthis.text()
altered = text.replaceAll target, "<span class=\"#{css_class}\">$&</span>"
if altered isnt text
jthis.replaceWith altered
($ document).ready ->
($ 'div#page').tag '⚀', 'die'
I am not a F
lash expert.
I have a FLA file of a game coded in ActionScript 3.
The game has a string inside, "www.mywebsite.com".
I want that when someone opens this FLA and searches for ".com" or "mywebsite.com" to find nothing. So I have decided to encode that string somehow. But I never coded in Flash, so I have no idea what to start with and Google isn't helping.
Basically all I want to do is replace this line:
var url1 = 'www.mywebsite.com';
With something like this and be functional.
var url1 = base64_decode('asdahwiyadwaeawr==');
Even a XOR or other simple string manipulation algorithm would be good.
What options do I have without importing any non-standard libraries into Flash?
Anyone looking through your code at something like var url = BlaBla_decode("cvxcvxc"); can simply replace it with var url = "www.HisWebsite.com...
So I guess you're supposing no one will be going through your script line by line but instead search for ".com" (Which would make him a really lazy jerk)!
A simple solution is to come up with a function that would return "www.MyWebsite.com" without writing it;
Something like:
var url:String = youAreStupid();
function youAreStupid():String
{
return String(f(22) + f(22) + f(22) + "extra.extra" + f(12) + f(24) + f(22) + f(4) + f(1) + f(18) + f(8) + f(19) + f(4) + "extra.extra" + f(2) + f(14) + f(12)).replace(/extra/g, "");
}
function f(n:Number):String
{
return String.fromCharCode("a".charCodeAt(0) + n);
}
I can't but say this would be lame way to protect your document, and I suggest you keep a comment at the top of your Script (something clearly visible) : // You won't find it YOU ARE STUPID
Now if he's smart enough to search for youAreStupid, that means he's entitled to change it :p
Of course there's also the simpler:
String("-Ow-Mw-Gw-!.-Ym-Oy-Uw-Ae-Rb-Es-Si-Ot-Se-T.-Uc-Po-Im-D").replace(/-./g, "");
but that's no fun!!!
I managed to whittle my example down to the following (it uses some reasonably hefty data URLs but stackoverflow should flow them off the side nicely...):
static
{
String oldValue = System.getProperty("java.protocol.handler.pkgs");
if (oldValue == null)
{
System.setProperty("java.protocol.handler.pkgs", "org.xhtmlrenderer.protocols");
}
else if (!oldValue.contains("org.xhtmlrenderer.protocols"))
{
System.setProperty("java.protocol.handler.pkgs", oldValue + "|org.xhtmlrenderer.protocols");
}
}
#Test
public void testLegacyCellSpacing() throws Exception
{
ITextRenderer renderer = new ITextRenderer();
renderer.setDocumentFromString("<html>\n" +
" <head>\n" +
" <title>Some title</title>\n" +
" </head>\n" +
" <body>\n" +
" <div>\n" +
"<table cellpadding=\"0\" cellspacing=\"0\">\n" +
"<tr>\n" +
"<td>\n" +
" <img src=\"data:image/png;base64,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\" width=\"185\" height=\"83\"/>\n" +
"</td>\n" +
"</tr>\n" +
"<tr>\n" +
"<td>\n" +
" <img src=\"data:image/png;base64,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\" width=\"185\" height=\"84\"/>\n" +
"</td>\n" +
"</tr>\n" +
"<tr>\n" +
"<td>\n" +
" <img src=\"data:image/png;base64,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\" width=\"185\" height=\"83\"/>\n" +
"</td>\n" +
"</tr>\n" +
"</table>\n" +
" </div>\n" +
" </body>\n" +
"</html>", null);
renderer.layout();
File pdfFile = File.createTempFile("TestFlyingSaucer", ".pdf");
OutputStream output = new BufferedOutputStream(new FileOutputStream(pdfFile));
try
{
renderer.createPDF(output, true);
}
finally
{
output.close();
}
System.out.println(); // breakpointing here to look at the output. no good assertions available for checking this problem yet. :(
}
This code runs, and generates a PDF which has incorrect spaces between each image. I can't figure out what is causing the spaces, but I can't figure out if it's a bug either. What I do know:
Web browsers don't show spaces between the images.
If you remove the images and replace it with something like a fixed size div, the problem magically goes away (this proves that flying saucer is doing the right thing with the legacy cellpadding and cellspacing attributes, which was my initial concern.)
If you add a 1 pixel border to the cells (td { border: 1px solid red; }), it shows that the extra space is outside the td elements.
If you remove the whitespace between <td> and <img the problem appears to vanish.
It seems odd to me that extra space inside the element could result in extra padding/margins outside the element. Perhaps I'm completely misunderstanding HTML though, so I'm hoping that someone will set me straight here before I jam an issue in their tracker.
(Also: Preempting the typical knee-jerk answer of "don't use tables for that" - this is not my HTML, I'm trying to render real world HTML to PDF after cleaning it up. This example shows post-cleanup HTML to rule out the problem being in the cleanup code.)
Browsers are sensitive to white space in HTML in many places, including inside and in between elements, and even in places you would not expect. For instance, if you had a ul with li elements, if you use CSS to style the items with li {display:inline} to make a horizontal menu, any white space between </li> and the next <li> will space the menu items apart!
In this particular case, seeing the white space indenting the first child element is certainly unusual but I can't say categorically if it would be considered a bug according to the HTML standards. Your best solution is indeed to simply eliminate white space where it causes issues.