How can I display monospaced text that includes an arrow that is the same width as the other characters?
In Android Chrome, the arrow is inexplicably wider, as shown in the screenshot below, regardless of the font. I'd expect the arrows to be the same width as the other characters. On the desktop, the arrow character behaves as expected.
The wide arrow is making my text alignment look ugly. I've tried different fonts and different arrows without success. I couldn't get CSS to force the arrow to 1em width. (I don't know if the problem is Android-specific or happens on other phones.)
Code:
<pre style="font-family: monospace">
IIIIIIII
MMMMMMMM
→→→→→→→→
</pre>
jsfiddle link
The problem is not cause by Android-specific, it's about the font didn't provide the marks. (e.g. ↑↓←→)
For example, you can see monospace fonts at Google Fonts
only Nanum Gothic Coding provide the marks ( ↑↓←→↖↗↙↘ )
Google Fonts search results 1
Google Fonts search results 2
Google Fonts search results 3
Google Fonts search results 4
Related
Okay, this is driving me nuts. I've been troubleshooting a formatting issue and have been stripping and stripping the code down and no explanation for what I see.
Look at the following page:
http://test.solivitahoa.com/testbig.php
VERY simple HTML. No CSS, no JS, just a table with 2 columns. If you view it on your desktop, it's fine and looks as expected. HOWEVER, if you view it in Chrome on Android (I'm running Android 8 on OnePlus 5), the first cell has text that is much smaller than the right cell even though there is no sizes specified in the code.
The formatting is as expected until the last "1234567890" is set on the first line and then it increases the font size.
What causes this? Is there a way around it?
That is od. One way to fix it is to set a fixed text size on the whole document. For example, this css fixes the issue:
body {
font-size: 12px;
}
You can consider this your font reset css.
I need to render the Black Diamond Suit (♦, U+2666) the same on multiple browsers. Unfortunately, this is an emoji as well, meaning it renders like this:
Source
when I want it to always render like the "browser" image (top left).
This is especially frustrating on iOS and Android because it's not rendered as black.
Unfortunately, Font Awesome doesn't include a usable replacement. The nearest is "Black lozenge", U+29EB ⧫︎ but it's a bit stretched.
Is there a way to force the mobile browser to render it like a desktop browser would?
Looking at the spec found on fileformat.info there is a text version of the black diamond that can be used instead:"\u{2666}\u{FE0E}"
Use this in css
color: transparent;
text-shadow: 0 0 0 black;
2023 observation: "\u{2666}\u{FE0E}" doesn't seem to work on my Android Chrome - displays red diamond.
"\u{25C6}" does work here - black diamond is displayed on phone.
HTML code ◆
I'm using the :before pseudo class to add an icon to a hyperlink by giving it specific font-family and content properties. In addition, the :before selector has a padding-right (or margin-right) so that the icon doesn't sit flush against the text. In all browsers except for my S4 cell phone, the padding-right works. I cannot find any documentation or support for getting the S4 to render the icon spacing properly.
Has anyone else ran into this and if so, did you obtain a fix?
<a class="icon-star"> This is a start icon </a>
I've tried like this:
For five spaces used: &#npsp; &#npsp; &#npsp; &#npsp; &#npsp; but it is not provided proper space for all lines in my passage and I thought it is a bad coding practice.
I've used , , , (someone wrote in Yahoo Answers). Although some are wrong in this but not anyone of this worked for me
I've used <pre> (my text)</pre> worked fine but the font of the text is changed to some ugly format of font.
<tab align=6> also used but not worked for me.
I am doing coding in webview in Android to display the text on the screen.
Can anyone please help me out to provide proper horizontal tab space in front my text.
Thank you..
You can use the CSS style text-indent to indent the text.
Add a style like text-indent: 40px to the element that contains the text, for example using the style attribute:
<p style="text-indent:40px"></p>
You can also put the CSS in a style sheet and load the style sheet in the webview. In the style sheet you can for example specify the text-indent for all paragraph tags:
p { text-indent: 40px; }
Another option is using the tag <blockquote></blockquote>. But it is not its intended use, it is meant for quoting text.
Html3 had a <tab> element that did not survive into html4 or html5.
However, it is easy to define this element in CSS:
tab:before {content:"\9"; white-space:pre;}
This has the correct content - a tab character with Unicode code 9, and preserved white space. The preserved white space setting only operates on that one character, so you can write html like this:
<div>
This is a<tab/><tab/><tab/>Test<tab/><tab/>and Test<br>
Another<tab/><tab/><tab/>Test<tab/><tab/>and Test<br>
Yet Another<tab/><tab/>Test<tab/><tab/>and Test
</div>
And everything will work as you expect.
See this jsfiddle for the same example.
By default css defines the width of a tab character to be 8 times the width of a space. But you can change this in modern browsers using the CSS tab-size property.
Live URL: http://www.jungledragon.org/apps/jd3/lists
I'm working on a responsive website and as I am testing it on various devices (mostly using browserstack) I'm running into an issue that seems specific to the Android 2.3 browser.
Please find below the correct rendering of what I am trying to accomplish. This is how it works and looks on almost any browser tested. What we're looking at is a list of photos, each having a caption. The caption is entered by users and can be of any length. The caption in the top left photo is very lengthy, yet as you can see it is cut off correctly, for this I am using the text-overflow:ellipsis CSS property.
This is how the same page looks on the Android browser (2.3, using browserstack to simulate a Galaxy Note):
As you can see, the top left photo takes up more than the 50% that I have set it to, and as a result the view extends the browser window. It definitely has to do with the long caption, because if I shorten it, the view does fit in nicely.
Strangely, we do see the ellipsis effect taking place, it's just that it it somehow uses more width than I specify.
The HTML structure is as follow (pseudo code):
<ul>
<li>
<figure>
<img>
<figcaption>caption here</figcaption>
</figure>
</li>
</ul>
The li element has a width of 50% applied in CSS. The ellipsis properties are set on figcaption a. As explained, the Android 2.3 browser does seem to apply the ellipsis, yet it goes beyond the 50% width that I specified. I have tried all kinds of overflow properties at all levels of the html structure, all to no avail.
As I am using this technique in various places, I'm quite eager to solve it.
Note: I'm using border-box throughout the design, although I don't think that is the issue.