22

I'm developing a website using responsive design. I am trying to display the unicode character &#9776 (the ☰ symbol), and it's not showing up on Android. Is there any way to get this character to display properly, or do I need to make an image out of it?

Thanks

4
  • how are you displaying it ? most likely it is due to how you read it somehow
    – njzk2
    Jan 28, 2013 at 17:02
  • not sure exactly what you mean. It's in a pure html page and read through android's default browser.
    – symlink
    Jan 28, 2013 at 17:03
  • sorry, missed the "website" keyword. could be either a character not available on the device, or an issue with the encoding used
    – njzk2
    Jan 28, 2013 at 17:03
  • I'm pretty sure it's not available, as other unicode characters are showing up fine. Is there a work-around for this?
    – symlink
    Jan 28, 2013 at 17:04

6 Answers 6

20

The character denoted by ☰ does not appear in Android fonts, and its font coverage is relatively limited in other environments, too.

The basic options are using a downloadable font (web font) via @font-face and to use an image, suitably scaled to text size.

If this is the only “special” character you need, the image approach might be suitable: it is easy, and the shape of the character is so simple that it can be expected to scale well.

Using a downloadable font may produce better results especially if the character is used inline inside text. But you would probably need a font like Quivira or Symbola, which are large (> 1 Mbyte) free fonts, and this would seem to imply a disproportionate overhead if it’s just for one character.

For more info see my Guide to using special characters in HTML.

0
7

Why no one is suggesting the CSS3 method is beyond me. This is supported across almost all devices.

Here's a fiddle to see it in action, http://jsfiddle.net/328k7/.

Use CSS3 to create the trigram, like so:

div {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 16px;
    top: 0;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px #69737d,1px 22px 1px 1px #69737d;
    box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
}
1
  • 2
    To have sharp and pure black lines use box-shadow: 1px 10px 0px 1px #000,1px 16px 0px 1px #000,1px 22px 0px 1px #000;
    – dargmuesli
    May 23, 2016 at 19:24
2

Its not defined for the current font. You can change the font to something where it is if you only care about your own device, but the only way to make sure its displayed on all devices is to use an image.

1
  • Thanks, this is probably what I'm going to do
    – symlink
    Jan 28, 2013 at 17:15
2

Have a look at the supported characters on Android: Android character sets. It doesn't seem to be supported. You can probably replace it by an <img src="http://www.fileformat.info/info/unicode/char/2630/trigram_for_heaven.png"> tag.

[Edit] the linked URL is no longer valid, but you can still view it on archive.org:
https://web.archive.org/web/20130603091753/http://www.ascendercorp.com/pdf/Droid_fonts.pdf

1
  • Not to be picky, but is it possible to get this image in white?
    – symlink
    Jan 28, 2013 at 17:14
1

I know the original post is old. This is how I accomplished it.

CSS

/*⮛*/
.caretdown:before {
font-size: 13px;
font-weight:900;
content:"\002b9b";
}

Substitute on mobile with @media tag

/* If the screen size is 600px or less */
@media only screen and (max-width: 600px) {
/*substitute ⮛  on mobile for ▼ */
    .caretdown:before {
    content:"\25BC";
    }
}
-1

I use this code for hamburger-menu-icon:

public class MenuButton extends Button
{
    public MenuButton(android.content.Context context){
        super(context);
    }

    public MenuButton(android.content.Context context, android.util.AttributeSet attrs) {
        super(context,attrs);
    }
    public MenuButton(android.content.Context context, android.util.AttributeSet attrs, int defStyleAttr) {
        super(context,attrs,defStyleAttr);
    }
    public MenuButton(android.content.Context context, android.util.AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context,attrs,defStyleAttr,defStyleRes);
    }
    Paint paint = new Paint();
    @Override
    protected void onDraw(Canvas canvas){
        //super.onDraw(canvas);
        MarginLayoutParams lp=(MarginLayoutParams)getLayoutParams();

        float p=lp.rightMargin;
        float w=getWidth()-lp.leftMargin-lp.rightMargin;
        float h=getHeight()-lp.topMargin-lp.bottomMargin;

        paint.setColor(Color.WHITE);
        paint.setStrokeWidth(0.0f);
        float ww=(h)/5.0f;
        canvas.drawRect(0+p, ww*0+p, p+w, ww*1+p, paint);
        canvas.drawRect(0+p, ww*2+p, p+w, ww*3+p, paint);
        canvas.drawRect(0+p, ww*4+p, p+w, ww*5+p, paint);
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.