I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.
Here's another SO question about the issue.
ace editor cursor behaves incorrectly
My problem may have something to do with using a Bootstrap theme, but I'm not entirely sure.
When I open chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template is using the fonts
input, textarea, input[type="submit"]:focus, div {
outline: 0 none;
font-family: 'Open Sans', sans-serif;
}
If I add to my css
.ace-editor {
font-family: monospace !important;
}
I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.
Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.
If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works.
Going to the computed properties, is shows the font-family to once again be 'Open Sans'.
So the question I'm trying to answer, is how can I either figure out what font is ACTUALLY being used when I cancel out the textarea entry from Bootstrap? Or why is this not accepting the monospace font when it is specified.
I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.
The issue is caused by div included in bootstrap rule.
It is too broad and breaks character width measurements for ace.
You can add
.ace_editor div {
font: inherit!important
}
as a workaround. Would be good to also report an issue to the creator of your bootstrap template.
Related
I use as font-family stack like this:
body{
font-family: icon, 'Merriweather Sans', ui-sans-serif, sans-serif;
}
with icon being an icon-font that has some symbols in it for example arrows, which can occur in copy text or headlines.
The icon font is loaded like this (simplified example):
#font-face {
font-family: 'icon';
src: url(icon.woff2);
unicode-range: U+1F872, ..., ...;
}
That way whenever the 'arrow bold to right' is used in a text it will be rendered in the icon font. It works well and is foolproof.
I also use (simplified example again)
p.text{
max-width: 70ch;
}
which ensures that text paragraphs don't have too many characters in one line for readability.
Firefox makes those text paragraphs a lot smaller than chrome. And after some experimenting, I found that FF uses the icon-font to determine the width of the zero while Chrome uses Merriweather Sans.
The icon font has no zero-glyph in it and would be hindered by its Unicode range to display one.
So at first glace it seems correct that Chrome calculates ch based on the first font-family in the stack that contains a zero and is allowed to render a zero.
On the other hand I'd think that for calculating the abstract ch unit one can argue that the actual presence ot the zero character isn't necessary. Also it should be perfectly ok if one would use one font only for displaying number (through Unicode-Range) while the next font displays letters. What font should be used for calculating the ch value then?
Can anyone tell me if one or the other browsers does it wrong and the other does it right?
And has anyone an idea for a good workaround?
In Chrome, the font size and font family of form 'select' fields is not following css rules as expected.
My stylesheets declare the font-family should be 'Open Sans', and font-size should be 14px.
But, it is reverting back to 'Lucida Grande' and 11px.
This screenshot of Chrome's developer tools sums it up - the Country select field is the item in question:
The following didn't fix the issue:
html, body, input, select, textarea, button {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
Interestingly enough, it is only doing this on my machine (mac mini mavericks); testing on others (windows 7/8) in the same browser results in no error. Has anyone else dealt with this issue? Is there some setting necessary to override default values?
One near-solutionis to use the following to increase the font size to 13px on Mac - but this results in a massive 48px on Windows:
select {
font-size: -webkit-xxx-large;
}
Alternatively, the following would reset everything about the menulist appearance, to build up from scratch (font size/family take CSS rules or inherit):
select {
-moz-appearance: none;
-webkit-appearance: none;
}
Ideally a simple font adjustment wouldn't require resetting everything about the menulist...
Whenever something unexpected happens with the cascading aspect of CSS, and it's clearly not an error introduced by the developer, then there's a good chance it has something to do with the !important command. Someone may have applied !import to a style in some earlier part of the CSS. Try applying it to your styles to see if it has an effect.
I must have went through every page of google but haven't found the solution yet. I have a custom font that I'm using through css font-face. The font adds extra padding on the bottom depending on the browser and OS that I am using. The picture below shows an example with mac being on the left and windows on the right. It looks correct on the right (in windows) and i want it to be the same on mac.
#font-face
{
font-family: universLight;
src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf');
font-weight: normal;
font-style: normal;
}
#button{
font-family: universLight;
border: 1px solid black;
background: #ccc;
}
The code is located at http://jsfiddle.net/ZDh5h/
Here is what I already know won't work from my research.
line-height adds padding to the top and bottom so the extra padding on the bottom remains.
using different extensions such as .otf or .ttf also doesn't work. Just produces the same results
changing the font-size also doesn't really do anything
I use this font a lot through out the site and don't really want to add different CSS sheets for mac vs windows. If anyone knows anyway to fix this without having javascript add extra padding I will be very grateful.
Thank you.
See http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
normal
Tells user agents to set the used value to a "reasonable" value
based on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
The computed value is 'normal'.
I think the behaviour you observe comes from different "reasonable" values across browser as normal is the default line-height value.
So specify your value (say line-height: 1.5em;) to get rid of the differences.
I have a created a few forms and I can't fgure out why in certain browsers and operating systems, my input buttons appear differently.
Check out the input button here: http://www.41q.org/admin
It's should appear as a square, but instead I get a round corder default button. Can;t figure this out. My CSS is not working.
Should I change the TYPE?
Erik
Try using normalize.css (http://necolas.github.com/normalize.css/) or reset.css (http://meyerweb.com/eric/tools/css/reset/). Then optimize for each browser.
This is probably an IE problem.
I like to define the body font family or font styles with the input, option, textarea, etc tags, like this:
body, input, select, option, textarea {
color: #fff;
font-family: arial;
}
I have a css definition in the head of my page as follows:
#font-face {
font-family: "ownfont";src: url("../fonts/ownfont.ttf");
}
Then i give a css class to the body (on button click) which changes the font type from:
font-family: Verdana,Arial,Helvetica,sans-serif;
to
font-family: "ownfont",Verdana,Arial,Helvetica,sans-serif;
"ownfont" is a 4-character font where spaces and hypen will be shown in order to show some non-visual characters.
Firefox 3.6.3 shows everything as excepted (looks the same as before except for spaces and hypen), but Safari (on Mac and Win; Versions 4.0.5, 5.0) changes the heigth of my text lines (or at least it looks like that or as if a padding/margin has been increased - but nothing has been changed except for the font).
Why does this font setting yield to different results in firefox and safari?
Is there a way here to force both browsers to behave the same?
any help or suggestion is appreciated - thanks in advance
Try specifying line-height: 1ex; in your css.
If you know what font(s) you're going to be using it with, it might be simpler to remake your font to have metrics more like the others'.