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>
Related
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
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.
Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.
Works fine on iOS.
Any suggestions?
Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
p.intro {
max-height: 5000em;
}
You can set the max-height on any parent element. It doesn't have to be the first parent. For example,
<footer class="primary">
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
</footer>
footer.primary {
max-height: 5000em;
}
Note that the -webkit-text-size-adjust property you mention is non-standard. Read more about it here.
Currently Chrome for Android scales text using font boosting and there's no way to disable it.
If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom
I had the same issue with Firefox on Android.
The solution for me was to add the style "float: left;" to the div containing the problem text.
You might need to set the width of the div to the same as the parent (in pixels or 100%) to ensure it doesn't affect the rest of the divs.
See How to prevent mobile browser from resizing text
-webkit-text-size-adjust:none is so horrible!
I have poor eye site and constantly have my pages at 200% default zoom. With -webkit-text-size-adjust:none, I cannot read anything, and my only alternative is to use Firefox. It's my number one problem these days when browsing.
Too many sites use this, especially embedded Facebook comments on web pages. You should stop using it and create an interface that will work with any-sized font.
I am having an issue with the content of a label being automatically inserted as a watermark inside an input. I have tested this on a range of phones and browsers but it seems to only happen on the HTC EVO (3D X515A). When I give it focus (e.g. touch the input) the text disappears, similar to the placeholder attribute of an input. There is also no auto-population with js.
I have tried searching to see if this is a new standard on Android browsers but have come up with only one reference to the issue which was closed over a year ago with no solution: https://github.com/jquery/jquery-mobile/issues/382
Here is the label and input code:
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
<label for="phone">Confirm your Valid Cell Number:</label>
I will have to take a picture of the phone's display if anyone needs to see the issue because it does not happen on my emulator.
UPDATE: Removing the input identifier on the label (for="phone") solves the problem, but is not syntactically correct. Seems to be a weird bug, or "feature" on HTC browsers.
I ran into another big problem with the HTC browser. When you autofocus on an input the browser will apply its own style regardless of your css. It removes the border and background color and the input looks empty and almost invisible (if not for the blinking cursor). Using the :focus pseudo-class and other -webkit selectors don't work to override the browser's styles. There's another question on here describing this issue with no clear answers. Closest I can get to a workaround is removing the style from the input and wrapping it in a div.
I fixed this by adding line breaks before the text in my label like so:
<label for="phone">
Confirm your Valid Cell Number:</label>
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
The browser is actually rendering the text (including whitespace) from the label in the input. What a bizarre/stupid bug!
you can fix this by adding the following css
-webkit-user-modify: read-write-plaintext-only;