Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to detect my font is correctly rendered at browsers ? #29

Open
cataclysmuprising opened this issue Dec 24, 2018 · 1 comment
Open

Comments

@cataclysmuprising
Copy link

cataclysmuprising commented Dec 24, 2018

Has there any way to detect my font was correctly rendered at browsers ?

To clarify my question , my API server was send Unicode Myanmar texts as response and I setted them as values of input boxes (textboxes,textareas etc). But when I was changed my browser's font to ZawGyi Font , I can't see correctly the texts of my input boxes.

I can't receive the the browser's active font, so I would like to detect when the Unicode texts are not correctly displayed and I would like to convert them as ZawGyi text values.

Any suggestions would be really appreciated. Thanks

@cataclysmuprising
Copy link
Author

cataclysmuprising commented Dec 25, 2018

Now I had solved my problem. Actually the text width of incorrect rendered text is quite different than actual. So , when the users was setted "Zawgyi-One" as their browser's standard font and my webpage shows the "Unicode" texts, the browsers rendered incorrectly.

To fix this issue , I putted some "Unicode" Myanmar texts and check the text-width of it's allocated on page. Below is code snipet how did I solved.

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

function detectAndConvertMyanmarFont() {
    // normal width would be around 130px but if the user was changed Zawgyi font as their browser's standard font, the width value may longer
    // around 180px for text ဝိပ္ပယုတ္တပစ္စာဣန္ဒြိယသမ္ပယုတ္တ
    var fontDetectorWidth = getTextWidth("ဝိပ္ပယုတ္တပစ္စာဣန္ဒြိယသမ္ပယုတ္တ", "normal 11px 'Roboto Regular'");

    if (fontDetectorWidth > 135) {
        var converter = new google_myanmar_tools.ZawgyiConverter();
        $("input[type='text'],textarea").each(function (index, elem) {
            $(elem).val(converter.unicodeToZawgyi($(elem).val()));
        });
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment