arrows right/down displayed as rectangles in Chrome on Android

[tigran123]

The CSS file jquery.bonsai.css has these two hardcoded:

li.has-children > .thumb:after {
  content: '▸';
}

li.has-children.expanded > .thumb:after {
  content: '▾';
}

They look fine in Chrome under Linux (Version 38.0.2125.101 (64-bit)) but under Android (different versions) they look like rectangles. Any ideas why? I do emit charset in the header, of course:

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

[simonexmachina]

That's strange, no no idea why. I have an Android phone and it works for me on this page: http://aexmachina.info/jquery-bonsai. What version of Android are you running? There does seem to be some noise about Android not supporting some characters online.

[tigran123]

I tried it on the above demo URL and it doesn't work there too --- so, it is not something that I am doing wrong. This is on Nexus 10 running Android 4.4.4 (I didn't upgrade it to Android 5.x because I saw how horribly slow my daughter's Nexus 7 has become after such upgrade). My mobile phone is ZOPO ZP950+ running Android 4.1.2 and the result is the same --- those characters are not shown.

But on Linux both Chrome and Mozilla Firefox show them just fine. And I just booted Windows XP in VirtualBox and tried with Chrome --- also works fine (IE doesn't work, but who cares --- nobody will be using IE or any other proprietary software in the coming New Age of Brotherhood of Mankind).

[simonexmachina]

It looks to me that those characters aren't included in the fonts of older versions of Android. The workaround for this would be to use images or a icon font. I specifically want to avoid adding any complexity to the module, so I won't be adding this, but if you feel like sharing your work if you do do this I'm sure others would appreciate it :)​

[tigran123]

Simon, I would like to add a bit more information. The situation I presented so far is "works on Linux, doesn't work on Android" and your suggestion that it is probably due to those characters missing in the font used by Chrome on Android sounds very plausible in this context.

However, the "real context" may be somewhat more complex. While I was experimenting with saving/restoring bonsai state (and the html tree as list as well) locally, I was repeating the operation of obtaining the tree and updating/restoring bonsai state on it too many times and I noticed that "occasionally" (about once in ten times) those characters are not displayed even in Chrome on Linux.

So, with this in mind (especially if I can reproduce it now that my save/restore code is finally correct) the idea of replacing those characters with images may be a "stability enhancement" and not just "make it work in more browsers". Here I assume that it is possible to implement it in CSS in such a way that only one copy of each image (i.e. two tiny images in total) are ever transferred and not one copy per visible (expandable) node.

[simonexmachina]

Here's some CSS that uses SVG replacements for the characters:

li.has-children > .thumb {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMTg0LjcsNDEzLjFsMi4xLTEuOGwxNTYuNS0xMzZjNS4zLTQuNiw4LjYtMTEuNSw4LjYtMTkuMmMwLTcuNy0zLjQtMTQuNi04LjYtMTkuMkwxODcuMSwxMDFsLTIuNi0yLjMNCglDMTgyLDk3LDE3OSw5NiwxNzUuOCw5NmMtOC43LDAtMTUuOCw3LjQtMTUuOCwxNi42aDB2Mjg2LjhoMGMwLDkuMiw3LjEsMTYuNiwxNS44LDE2LjZDMTc5LjEsNDE2LDE4Mi4yLDQxNC45LDE4NC43LDQxMy4xeiIvPg0KPC9zdmc+DQo=');
  width: 12px;
  height: 12px;
  background-size: 100%;
  margin-top: 6px;
}
li.has-children.expanded > .thumb {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42DQoJYzEuNy0yLjUsMi43LTUuNSwyLjctOC43YzAtOC43LTcuNC0xNS44LTE2LjYtMTUuOHYwSDExMi42djBjLTkuMiwwLTE2LjYsNy4xLTE2LjYsMTUuOEM5NiwxNzkuMSw5Ny4xLDE4Mi4yLDk4LjksMTg0Ljd6Ii8+DQo8L3N2Zz4NCg==');
}
li.has-children > .thumb:after {
  content: '';
}
li.has-children.expanded > .thumb:after {
  content: '';
}

I'll add this to another CSS file in the repo, not the default one.

[simonexmachina]

I've added assets/svg-icons.css to v1.1.1.

[tigran123]

Thank you! :)

[tigran123]

The file assets/svg-icons.css is zero size --- I've just cloned your repository locally:

$ l
total 32
drwxrwxr-x 2 tigran tigran 4096 Feb  2 10:53 assets/
-rw-rw-r-- 1 tigran tigran  225 Feb  2 10:53 bower.json
-rw-rw-r-- 1 tigran tigran  542 Feb  2 10:53 jquery.bonsai.css
-rw-rw-r-- 1 tigran tigran 9837 Feb  2 10:53 jquery.bonsai.js
-rw-rw-r-- 1 tigran tigran 1077 Feb  2 10:53 LICENSE.txt
-rw-rw-r-- 1 tigran tigran 2527 Feb  2 10:53 README.md
$ l assets/
total 0
-rw-rw-r-- 1 tigran tigran 0 Feb  2 10:53 svg-icons.css

Also, if I manually add those lines to the end of your jquery.bonsai.css file then those thumbs are not displayed even in Chrome under Linux.

UPDATE: That was my fault --- breaking the lines inside base64-encoded data when copy/pasting. Works now. Will test on Android now. Yes, works on Android as well. Only those arrows are very small, but I'll adjust their size in my local CSS.

[simonexmachina]

Ah yes, editor fail! Have pushed v1.1.2 with the actual CSS.