(Ask to answer)
For the project I'm working on we have a custom set of icons, which I converted into a font using https://glyphter.com/ (just googled this type of service and it seemed okay).
Inside one of the block I'm inserting an icon with the class from the CSS generated by the service (like you normally do with an icon font).
And suddenly the displayed icon is wrong - though the content property is okay.
Also could not find any other interfering styles which could do that.
Sorry, no code here, got no time for that. Also the project is quite restricted in terms of sharing details.
So after half a day of looking for a problem and trying different scenarios, it appeared, that the icon font generated had the same icons for the letters in both upper and lower case. And yes, the set started on the letters, not with an extended UTF-8 table (or whatever).
So the parent element had text-transform: uppercase which changed the icon without changing the content or else.
Maybe someone will find this info helpful.
Related
Im using the material-UI theme in Atom (MacBook Pro, 2021). I wish to make some of the UI text bigger, ex the text on tabs, menus, buttons, welcome page and so on.
(note: I don't mean the text/code in the actual editor!).
For example, I wish to make the text of these menu options larger. (print-screen from Atom):
I can't find this option in neither the atom settings, nor the material settings. I've looked at the material less-files but I don't understand them. Searched google and SO but I haven't found a solution that works for me.
Please keep in mind that I am a beginner if you have an answer!
Atom comes with a user stylesheet that one can use to override almost all parts of the UI. For example, you can add the following to increase the font-size of all DOM nodes by 120% – except the text editor itself:
html:not(atom-text-editor) {
font-size: 120% !important;
}
If you want to make more granular changes, you will need to use more specific CSS selectors. Fortunately, you can use Atom's built-in developer tools to inspect the selectors of the editor.
There is a setting in the Theme preferences - see my screenshots to locate the font size setting.
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I made a font. Some characters are intended to be combined (one glyph overlaid onto another, similar to प + े = पे).
This works fine when I import the font into a document editor, for instance, Libre Office. It also works fine when I type the script in a textarea in Google Chrome.
However, when the font is used in a textarea in Firefox, a tiny increment is made after each character, even though the horizontal advance is set to 0 in the TTF font file data.
This seems to be something built into Firefox, but it makes the combining look a bit off, and, if I wanted to overlay several characters on each other, it would look very bad. I think I read somewhere that Firefox knows to turn this off for certain fonts, but I cannot figure out how to do it. Or perhaps there's something in the CSS styling for the textarea? I'm at a loss.
Does CSS letter-spacing: 0; make it what it should be, or messing with that negative or positive get you anywhere?
Or check out the property font-kerning as well.
I have an element common to all pages that uses a font called "Just Another Hand" provided by Google Fonts API. On one of my pages, the element coincidentally happens to load in front of a Google Map and I noticed that when this happens the font rendering changes to a more eye-pleasing, fuzzier but smoother appearance (see screenshots below). I am using Chrome v.29 on Windows 8.
Further observations: Notice the grey header text (also visible in screenshot) does not change dependent on the presence of a Google Map. Use the inspector to remove the z-index property and the font rendering will return to it's original, less eye-pleasing state. The element has to be in front of the Map for any effect to happen.
Why is this happening and can I leverage one of the technologies to force/suppress this effect?
P.S. I appreciate this is not a coding question by I am hoping it will receive a coding answer.
[Please only post an answer if you know the answer really well -- if you post an answer such as "I think it is easy to style it in CSS", then it is a guess and not a real answer, and it will make lots of people skip this question because it is marked as "answered"]
[I know the Share button is to be phased out, replaced by the Like button, but the program management still wants to use it as well as using the Like button]
I see fairly often that the Facebook Share button is faked by using an icon, as a background, and the text "Share" as a "button" -- the icon + text is faked to be 1 button.
Example:
http://www.youtube.com/create_detail/GoAnimate
http://www.pcmag.com/article2/0,2817,2381106,00.asp
The surprising thing is, it actually looks good on FF as well as IE 7. And the top link uses Tahoma font, while the second one uses Verdana for Windows, and "Lucida Grande" for Mac.
Question 1: what is it not made into an image? Because as we all know, an image looks the same almost every where. If you need to align the icon with the text, for all different fonts on different platform - Mac, Win 7, Win XP, Vista, Linux, IE 7, IE 8, FF, Chrome, and make the background of the text blue so that it looks like part of a button, it is going to be hard. Different fonts have different top space and bottom space (the "leading" as in printing terms), so it is hard to align the text well with the icon, and also hard to make the font not to look like grainy text on all platforms.
Question 2: is there a standard library or standard method to do it?
(the long existing <fb-share> as XFBML actually gives you an <a>, with the background icon, and then a <span> inside the <a> tag containing the text "Share". So it is actually just a square icon + text, but such as the second link above, they will fake it as a button. Maybe that's why even when it is not XFBML, some people still show the button this way instead of a good old image)
Update: also, it is hard because they usually are just <span>, and you can't specify a width for a <span>. Also, it has double borders to make it look like 3D, but it looks like 1 border is real CSS border and 1 border is by using the Sprite underneath.
Update 2: By the way, of all the Facebook Share button page that still exist on web, I never saw one with a Bubble with a count... this is getting more mysterious...
There are three good reasons for doing it this way:
Reuse: You can use the same icon on several different buttons, regardless of what the text content of the button is. This means you only have to download the icon once, which saves on bandwidth (see below) and means you don't have to make a different button image for every button you want to provide to the user. This is especially important on multilingual sites, as I'm sure you can imagine.
Bandwidth saving: The small icon used to decorate the text button is a lot smaller than an entire button graphic would be and therefore consumes less bandwidth to download it. While for one button this might not amount to much, it all adds up, especially on a site with potentially hundreds of different buttons that gets the kind of traffic that a site like Youtube or Facebook might get.
Accessibility: Image buttons take some additional work to make them accessible (the addition of an alt tag for example) which can get overlooked by web developers in a hurry. Text buttons are accessible by default because they're, well, text.
As for how to do it well, there's any number of approaches. You could use the <button> tag, though this has its own set of issues in IE, you could use <input type="button" /> and give it a background and padding (so the text doesn't overwrite the background) but that approach will require javascript to make the button actually do anything, <input type="submit" /> (similar to buttons but handling them is done server side instead of with javascript), or you could style <a> tags to look like buttons by giving them a background, white top and left border, black bottom and right border, etc. I'm sure there's others as well that I can't remember off the top of my head.
UPDATE: The OP added an update regarding spans and width. By default, no, you can't give a span a width. If you give it padding you can create space inside for adding the icon as a background image, of course, but if you need to explicitly give a span a width you can do it by setting its cisplay CSS property to block or inline-block (the latter requires a modern browser to work)