My problem can be best described by attaching these two screenshots: [1] [2]
In the second image, notice the "Continue Reading" link is rendered in sans-serif (?), and in the first image the problem is clear.
Basically, this only happens in Chrome on Windows.
So it seems like any line containing an HTML special character will have its font-family affected, and rendered in some sort of default-type fonts. I realize these custom characters may not be present in my first-choice font, but why are other characters affected as well? How can I remedy this?
If it's of any help, here's a link to my website. I'm using Ideal Sans SSm by H&FJ.
edit: It seems that my question isn't that clear after all. If you look at image [1], you can see how Chrome renders my fonts after an HTML character has been used. This is how the HTML looks like:
Especially if you’re new to OS X, this is the very first app you want to have. Holding ⌘ for a bit longer presents you with a list of active shortcuts, both global and app-specific ones. CheatSheet is also useful for existing Mac users looking to expand their shortcut vocabulary for extra effectiveness.
As seen in image [1], when this code is inserted, a different font is rendered.
Note: on my live website I currently have span tags around the special characters (that's a ⌘, by the way) in order for visitors not to suffer from this. This can actually help us with a direction towards the answer: Why is it that when the special character (any special HTML character) is wrapped in span tags, it and only it is affected by this, but when it's wrapped in span tags, the whole line is affected.
Related
I resently found out that in chrome you can highlight text in the link. This can be done by adding #:~:text= to the link. Example: This link does not highlight anything while This link highlights my chosen context. Since I discoverd this I'm using it all the time for showing somthing to a colleague.
My question is what is the browser suport for this? And if I try to highlight a whole paragraph it doesn't work, so what is the limmit?
I searched for a while without anny sucess.
Edit
After long trying i found that there is not a spesivic limit to this. It stops at a dot F.E. This is will work. and if i go farther like This won't bequse the text im searching goes trough after the first dot!
Edit 2
Having another look at the documentation I saw that you can add a begin and end preifelx. When useed you can select a whole paragraph like This.
[For ongoing detailed browser support information: Scroll-To-Text Fragment support on Can I use]
Well, after some obscure googling I got this
TL;DR - it's a very interesting chrome-specific feature Scroll To Text Fragment. As mentioned here there is no support in other browsers, albeit IE/Edge is in "public support" state (as they say, it used to be in IE5). Documentation is here, and I don't see any size limits. Maybe the problem is in line break/begin-end paragraph special symbols handling?
UPD: other idea: there was a limit on GET-request length - 2,048 characters. Now it should be bigger, but maybe chrome still somehow cut/doesn't process too long URLs?
UPD2: The first guess is right. This link to wikipedia works, albeit this, only one character more, doesn't. The problem is in 0A/0D "carrage return/line feed" characters: if they are present in text, even encoded, highlight won't work at all. Possibly it's a bug and should be reported to Chrome, but still. Good thing for checking this is to paste selected text in Chrome "Search" tool: if it doesn't find pasted text and you see some strange characters - whoopsie.
I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.
I am currently using the utf code "\293B" for an arrow to put before the reply link in posts. the html is declared utf 8. The arrow works in firefox and explorer but not chrome. i saw that wordpress uses content: "" ("\f412";) (for example here:http://cinematicamsterdam.wordpress.com/2014/05/26/cinematic-city-a-retrospect/) that works accross all browsers but I can't paste it in my document. How can I do it?
i'm a newbie here, sorry if the question is simple..
This does not primarily depend on browsers but on fonts installed in the system; secondarily it depends on your CSS settings and on some shortcomings in browsers. For a general description of such issues, see my Guide to using special characters in HTML.
In particular, U+293B BOTTOM ARC ANTICLOCKWISE ARROW “⤻” has rather limited font support. A large number of systems have no font containing it. It could be used rather (though not 100%) reliably using a downloadable font, but it sounds like you are generating HTML-format e-mail messages, so downloadable fonts are hardly a feasible option.
The best short appears to be to an image instead.
What your describe as WordPress usage is a Private Use codepoint. In practice it works only with a particular special font. You can copy and paste it, but outside the private use context such as use on a web page with a specific font, it has absolutely no meaning and should not be expected to have any particular rendering, or any rendering at all.
There are a number of asterisk (*) types as you can see here:
http://www.eki.ee/letter/chardata.cgi?search=asterisk
Even now, we can see that some of these characters like the one with the code: "204E" also known as "low asterisk" is not rendered in HTML (at least while using Chrome anyway).
You can see the character here:
⁎ -> ⁎
Other similar types work however:
✢ -> ✢
✣ -> ✣
✤ -> ✤
Of course out of all the possible types, the authors of my input data have chosen ⁎ to work with.
It makes me think it should be somewhat general, because I saw solutions where a tiny image was used instead of this character in the entire HTML document. Needless to say I do not like that approach even a bit.
Is there a way to make this work in HTML? Is this possibly a browser specific issue?
UPDATE:
Internet Explorer 9 and Google Chrome also fail to render this special character.
Firefox and Chromium (Ubuntu) seem to be able to render it.
Please note, that I would like to find a general solution if possible.
My HTML code:
<html>
it works in chromium though ⁎
</html>
I use Chromium in Ubuntu, and it works fine in it.
and here goes screen shot of IE, in case you want to see it.
Furthermore: for those looking for a middle asterisk ∗ -> ∗
This primarily depends on the fonts installed in the user’s system, not on browser (though some browsers, most notably IE, might be unable to utilize all the fonts in the system, as they should). Regarding e.g. U+204E, font support is relatively limited: no font shipped with Windows contains it, whereas Linux systems probably have some font that contains it.
Using #font-face for some suitable free font, you could make the character display in most computers (excluding basically just those that have font loading disabled). See my Guide to using special characters in HTML.
In this case, that would probably be overkill, if you just need e.g. a low asterisk. A normal asterisk, in a lowered position, should be sufficient – at least compared with the overall typographic quality of HTML documents. Example:
<style>
.low {
position: relative;
top: 0.55ex;
}
</style>
Compare: *⁎<span class=low>*</span>
(Using relative positioning is safer than using vertical-align, directly or via the sub element, since vertical-align usually messes up line spacing.)
I'm observing this super weird bug on a news site maybe someone has seen before.
In the html text, if the first characters in a line of text are numerals, they are not displayed by the browser.
The html is coming through via a CMS, which forces the line breaks in the editor, but no tags are inserted. CMS data is XSLT processed into html templates.
When this text is sent to the browser, you can see the new lines are formed (without br tags), and you see that the numerals are still within the content. But these new lines are only honored by the browser if a white-space property is set using one of the "pre" values.
Seems to be related to the white space property as i can use the inspector to add white-space:pre-line/pre-wrap and boom, they appear.
Really keen to hear some thoughts on this, or could this be a possible Chrome bug?
Link to an example article here:
tvnz.co.nz/national-news/flights-cancelled-130km-h-winds-hit-wellington-5508294
In the last paragraph of that article you can read/inspect to see the missing numeral values.
So I really don't understand why this happens, but it has something to with the zoom setting... There are all kinds of articles about chrome bugs w/ the zoom setting, but none seem to address exactly what you were seeing...
If you inspect the page and change the zoom from 1 to .99999 it works... Again, I got the suggestion from this link but I'm at a loss to explain exactly what is broken w/ chrome, but it does seem like a chrome bug...