non-english chars in google charts label? - charts

Does non-english characters work in google charts labels/legends ?
This works, the legends shows up fine:
var chart_url = 'http://chart.apis.google.com/chart?' + 'cht=bvs' + ...some other stuff... + '&chdl=Lowest price|Average price';
This doesn't work, the legends don't show at all:
var chart_url = 'http://chart.apis.google.com/chart?' + 'cht=bvs' + ...some other stuff... + '&chdl=L' + unescape("%E4") + 'gsta pris|Genomsnittligt pris';
Any ideas? Thanks in advance!
/toby
-----------edit-----------
Neither of these works:
'&chdl=Lägsta pris|Genomsnittligt pris'
'&chdl=L& auml;gsta pris|Genomsnittligt pris' (without the space after &)
'&chdl=L%E4gsta pris|Genomsnittligt pris'
%E4 == ä urlencoded.

My guess is that most letters will work, but you have to do the equivalent of urlencoding them (see urlencode()).

Struggled with the same problem and it turned out that google charts want the texts urlencoded in UTF-8 (of course...)
So "Lägsta pris" should be == L%C3%A4gsta+pris

Related

Flutter/Dart programmatically unicode string

I have a list of customized icons to my app, it comes like below setted as IconData, note codePoint (0xe931).
IconData angry_face = IconData(0xe931, fontFamily: _fontFamily);
There's nothing wrong with that, but I've some cases where I need this icon as Unicode string to be used as a text. It should be done just like:
// It works too
Text('\ue931', style: TextStyle(fontFamily: _fontFamily));
The problem is:
I don't wanna use this code "by hand" because this icons are changed constantly by designers team and sometimes it changes its code messing up my app icons. What I need to do is get the icon object and parse it to the Unicode string, so I can use it with a Text widget.
I thought that would work to get programmatically that code and just use it, but it don't:
var iconcode = iconData.codePoint.toRadixString(16);
var result;
// Error: An escape sequence starting with '\u'
// must be followed by 4 hexadecimal digits or
// from 1 to 6 digits between '{' and '}'
result = '\u$iconcode';
// Just a simple string
result = '\\u$iconcode';
In few words: How can I parse programmatically int codePoint to a valid Unicode string?
Here's the right answer. I tried everything but this... Thank you #julemand101
final result = String.fromCharCode(iconData.codePoint);

Using a Chrome extension to insert characters into sites such as Facebook

I have created a chrome extension to allow users to right-click in a textbox, and insert special characters. This works on many sites such as StackOverflow, but does not work on sites such as Facebook. This is because Facebook is not using a standard text box form control. Instead for each line in a text message, it seems to be using a div > div > span > span construct. Is there a way to create a Chrome extension to target page components such as this?
An portion of my Chrome extension code looks like this:
main.js:
chrome.contextMenus.create({
title: "\u038F",
contexts:["editable"],
onclick: function(info, tab){
chrome.tabs.sendMessage(tab.id, {action: "insertCharacter", character: '\u038F'});
}
});
content.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
var objField = document.activeElement;
if (request.action == "insertCharacter"){
insertAtCursor(objField, request.character);
}
});
function insertAtCursor(sField, sValue){
if (sField.selectionStart || sField.selectionStart == '0'){
var nStart = sField.selectionStart;
var nEnd = sField.selectionEnd;
sField.value = sField.value.substring(0, nStart) + sValue + sField.value.substring(nEnd, sField.value.length);
sField.selectionStart = nStart + sValue.length;
sField.selectionEnd = nStart + sValue.length;
}
else {
sField.value += sValue;
}
}
Is there a more general purpose way I can do this to handle various situations on different sites? If not, is there a way to specifically target Facebook as most of the time myself (and likely others) are going to be using my extension on Facebook. (Of course having it work for email sites such as GMail would be a benefit as well).
In case it helps someone else, this is what I modified my code to based on wOxxOm's suggestion:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
if (request.action == "insertCharacter"){
insertAtCursor(request.character);
}
});
function insertAtCursor(sValue){
document.execCommand("insertText", false, sValue);
}
It's much more compact than my original approach and insertText handles the selection aspect automatically.

How did NPM create the border for their update message?

I'm assuming they used unicode characters to render the yellow box around the update message.
What characters were used and does it look the same on all platforms?
How did NPM create the border for their update message?
NPM uses npmlog to print to the console, and npmlog utilizes console-control-strings & gauge.
console-control-strings mostly offers convenience functions for moving the cursor around the line and coloring the text.
gauge provides the progress bar and spinner and a way to style them.
What characters were used and does it look the same on all platforms?
Unicode box-drawing characters are used for the border characters. I didn't research the exact unicode characters that NPM uses. Assuming that the terminal/platform is implemented to support unicode and, doesn't override the standard charset with its own characters (ie. emojis), I don't see why it wouldn't look the same across platform.
The below snippet unicode characters don't match exactly. Instead, it demonstrates how to use control-control-strings to print something close to what NPM outputs. I'm sure with enough tinkering you could get it to be exact.
const control = require('console-control-strings')
let title = `${control.color('cyan')}Update available 5.0.3 \u2192 5.0.4${control.color('reset')}`
let subtitle = `Run ${control.color('cyan')} npm i -g npm ${control.color('reset')}`
let borderWidth = (title.length > subtitle.length ? title.length : subtitle.length)
let topLeftCorner = '\u256D'
let topRightCorner = '\u256E'
let btmRightCorner = '\u256F'
let btmLeftCorner = '\u2570'
let border = [...Array(borderWidth)].map(() => { return '\u2500' }).join('')
let topBorder = `${control.nextLine()}${control.color('yellow')}${topLeftCorner}${border}${topRightCorner}${control.color('reset')}`
let btmBorder = `${control.nextLine()}${control.color('yellow')}${btmLeftCorner}${border}${btmRightCorner}${control.color('reset')}`
let lineWrapper = `${control.color('yellow')}\u2502${control.color('reset')}`
console.log(topBorder)
console.log(`${lineWrapper}${control.forward(borderWidth)}${lineWrapper}`)
console.log(`${control.nextLine()}${lineWrapper}${control.forward(4)}${title}${control.forward(5)}${lineWrapper}`)
console.log(`${lineWrapper}${control.forward(11)}${subtitle}${control.forward(10)}${lineWrapper}`)
console.log(`${lineWrapper}${control.forward(borderWidth)}${lineWrapper}`)
console.log(`${btmBorder}${control.color('reset')}`)

Is it possible to display the source of MathJax-rendered TeX inline?

I am reading this book where there are MathJax formulas. I am taking notes in an Ipython notebook. It is not convenient to take note from passages with Math formula. Is there an easy way to copy text with equations as a Tex command (which is render-able on Ipython)?
Update
TL;DR
Right click on a formula > Math Settings > Math Renderer > MathML
Create a bookmarklet from: javascript:(function() { var inline = document.getElementsByClassName("MathJax_MathML"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '<span>$</span>' + math.innerHTML + '<span>$</span>'; } })()
Run the bookmarklet on a page by pressing it
Enjoy easier copy & pasting!
Long version
This Github issue has a fix for the problem. It didn't work well for this page so I changed it a bit as above. It is not a general solution, but you can tweak it depending on the specifics of a page. If you are more eager, you can elaborate on it and make a browser extension for everyone to appreciate it :).
Old Answer
I tried couple of methods on this example:
Method 1:
Change the settings to render as MathML by: Right click on the formula > Math Settings > Math Renderer > MathML
Open the page source e.g. Ctrl + U on Chrome or Right click and press 'View Source'.
Find the piece of text you are looking for. It should be displayed in the right format:
bla bla $a \ne 0$ bla bla \(ax^2 + bx + c = 0\) bla bla
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
Method 2:
Do step 1 from previous method. The example page will be rendered with formulas but without the formula-enclosing characters.
Add single or double dollar signs around TeX commands to get the format as in step 3 of the previous method.
The best would be to combine the two method; i.e. getting the right format directly in the page. Let us know if you found a way to do it.
And thanks to #nam and #PeterKrautzberger for their hints :)
Here is my extension to #Thoran's answer with bookmarklet that can auto change renderer to MathML and display MathJax formulas source inline:
javascript: (function() { MathJax.Hub.setRenderer("NativeMML"); MathJax.Hub.Queue(["Rerender", MathJax.Hub]); MathJax.Hub.Queue(function () { var inline = document.getElementsByClassName("MathJax_MathML"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '$' + math.innerHTML + '$'; } }); })()
And here is PlainSource version:
javascript: (function() { MathJax.Hub.setRenderer("PlainSource"); MathJax.Hub.Queue(["Rerender", MathJax.Hub]); MathJax.Hub.Queue(function () { var inline = document.getElementsByClassName("MathJax_PlainSource"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '$' + math.innerHTML + '$'; } }); })()

Error while paginating html in UIWebView using css Multicolumns

Here is my Problem:
I'm currently writing an ebook reader in objective-c and want to use multicolumns to paginate my xhtml file in my webview.
Unfortunately when I add Multicolumns to my css, my html seems to be only 2 "pages" long, which is exactly the first two tags.
Does anyone know what I'm doing wrong?.
here is the code with which i inject the new settings into my css:
NSString *varMySheet = #"var mySheet = document.styleSheets[0];";
NSString *addCSSRule = #""
"function addCSSRule(selector, newRule) {"
"if (mySheet.addRule) {"
"mySheet.addRule(selector, newRule);" // For Internet Explorer
"} else {"
"ruleIndex = mySheet.cssRules.length;"
"mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);" // For Firefox, Chrome, etc.
"}" // endif mySheet.addRule
"}"; // end addCSSRule()
NSString *insertColumns = [NSString stringWithFormat:#"addCSSRule('div', 'height: 370px; -webkit-column-width: 320px');"];
[wv_reader stringByEvaluatingJavaScriptFromString:varMySheet];
[wv_reader stringByEvaluatingJavaScriptFromString:addCSSRule];
[wv_reader stringByEvaluatingJavaScriptFromString:insertColumns];
For scrolling i use the following code:
int i_scrollTo = ([AppState sharedInstance].i_myselectedPage -1) * wv_reader.frame.size.height;
[wv_reader stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:#"window.scrollTo(0,%d);", i_scrollTo]];
which works perfect if i don't set Multicolumns in my css.
I also tested, if my html is somehow cut off after adding multicolumns, but a NSLog of the content of the webview showed, that the whole ebook is loaded.
When getting the maximum scrollheight though i found out, that without columns it is 79061, and after inserting columns into my css it is reduced to 424 for some reason i don't know.
Can somebody please help me to fix this? I'm working on this problem for about a week now and couldn't find a solution.
Thx in advance.
Maverick
*UPDATE**
Scrolling horizontally doesn't work either, because my document.scrollWidth is stuck to the width of my Columns, which is pretty odd I think.
https://github.com/fedefrappi/AePubReader
Maybe this sample can help you ?