I'm developing a little webapp.
I tried displaying some output in an sort of ascii art way, using boxdrawing characters.
However, I noticed that on Android the space ( ) isn't equal width with the other characters, leading to ugly output.
I've put the font as monospace and even tried the monospace,monospace CSS setting.
To see what I'm talking about:
Please open https://tpgnow.herokuapp.com/CERN on Android and on a desktop browser.
Expected Output (desktop browser):
Actual Output (android browser):
I've tried different browsers and platforms and devices.
It seems to work on Win, Mac, Chrome and Firefox, also on iOS, but not on Android (neither Chrome nor Firefox).
Does anybody have a solution for this problem?
I ran into this exact same problem! Box drawing gliphs are missing in Google fonts.
Adobe's Source Code Pro has them. Mononoki should too.
I suspect may other issues with Android monospace are due to this general issue.
Related
I am writing a demo using CSS clamp() for width property and found that:
It works properly on desktop Edge, Chrome, Firefox.
It works properly on Android Chrome, Firefox, iOS Safari.
It does not work on Android Edge and UC Browser.
(Edge supposed to work due to using the same Blink engine with Chrome, as far as I know...)
When using Edge Remote Debug, I found that the width: clamp(...); declaration was invalid, no matter what the parameters were.
screenshot
After trying, even min(), max(), and calc() are invalid, which is strange. According to MDN and Caniuse, these math functions() should be supported already.
Hopefully someone can shed light on this, thanks.
It is stuck on pretty old Chromium version (70x), so we can do nothing until they update it.
I have following problem. My custom font in Wordpress, Wittenberg and Drunk Text Wide Medium, work fine in Android devices as well as in Chrome and Firefox on a PC, but not on the new Safari 14.0 version as well on all browsers in iOS devices.
It only happens with special characters like ¿ or letters with accent marks. For example I will attach some screenshots:
First example
Second example
How can I fix this issue?
Text may not display correctly if the web page uses characters that are not part of the default text encoding and the page does not indicate the correct encoding.
Is your page encoding in UTF-8 ?
https://support.apple.com/fr-fr/guide/safari/ibrw1031/mac
I created a web application dashboard which looks totally fine on the browser on the pc. Now what I would like to do is show this application 24/7 on a Sony Android tv with model number (BRAVIA 2017, android v. 7.0 kernel version 3.10.79).
Chrome natively isn't supported so I tried installing it using an APK. The thing is it the application doesn't look good due to the fact that this browser has a window width of about a 1000px and a height of 417 pixels. I tried downscaling in Chrome settings on the tv but it doesnt work.
Does anyone have any suggestions on what I could try or what other browsers are supported with a nice viewport width and height?
The native build in browser does not support css-grid
EDIT:
The default browser is called Vewd
It's a fact that some browsers ignore CSS they don't understand. If a browser which does not support CSS Grid comes across something it doesn't know, it throws that line away and continues.
Maybe you can use some old CSS like float,
or something to provide a grid type of layout, like
display: table-cell :)
I'm trying to create a simlpe responsive layout (JSFiddle) for a web app and struggle with the rendering on mobile webkit browsers.
They shrink some of the floating elements in a (to me) unpredictable way.
Layouts work well with desktop browsers and Firefox and Opera on Android but not with Chrome on Android and seemingly Safari on iOS (tested with Kitkat smartphone and simulated in Chrome for Android and Apple devices):Simulated Nexus 4 Rendering(Text in blue and orange areas should be as big as in the white area)
It seems it doesn't matter which exact CSS attributes I use; I tried CSS tables, boxes, floats, flex-boxes and lastly -webkit-boxes - all with the same result: Too small headers and footers
This is part of a project on Google Script, so unfortunately I am not in control of the viewport meta-tag, but a quick try with a local file and a <meta name="viewport" content="width=device-width, initial-scale=1"> tag didn't solve the issue either.
Has anyone experienced this before and has an idea how to fix it?
Thanks!
It seems this answer by moeffju is relevant to your problem:
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
https://stackoverflow.com/a/12965146/5297207
Using the Chrome emulator and adding this property to the P elements in the white area made the text adhere to the CSS font-size. (It makes the white text small like the blue and orange, not them big. The original sizing is small).
See the comments of the original answer I linked to for an explanation of why this works, and also some warnings about problems that might occur from using this fix. I've used it successfully on a couple of sites but didn't do very thourough testing on Safari.
While I'm developing responsive website I have used this uni-code ( » ) to the read more links. It is displaying correctly in desktop browser but it is not displaying correctly in mobile devices like android or iPhone. Is it possible to display the same as in desktop..? What's the problem..? Whether the mobile device doesn't support uni-code..?
The problem is in the embedded font you use, via #font face. The version used by Android is apparently broken. It does not display “»”, and it has problems with many other Latin 1 Supplement characters too, see my test page. Something may have gone wrong when you set up the font files on your server.
The problem does not appear if you remove the font-family setting, letting each browser use its default font, or if you use Droid Sans as hosted by Google, using <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'> and font-family: "Droid Sans", sans-serif.
The problem is most probably not in the display of a character (“»”, U+00BB RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK, is very widely supported in fonts) but in the character encoding. If the encoding is not properly declared, different browsers may make different guesses.
Check out the W3C page Character encodings, and make sure that the declared encoding matches the actual one.
If problems remain, please post a URL and explain what “is not displaying correctly” means (not displaying at all? space shown? some wrong characters shown? which?).
android does not support special characters, in android we need to write > to show ">" character. why don't you use image instead of characters.