I need to display data containing Unicode full block characters (\u2588). However, as you can see here, browsers seem to apply font smoothing to the blocks causing gaps to appear between the blocks. ██████████████
How can I render these characters without the gaps?
I tried using CSS 'line-spacing' with a negative value as a hack, but this text is being rendered with a mono-space typeface and it throws off alignment with the rest of the content.
I have the same issue for a long time and still searching for a perfect solution. CSS text-shadow method by Kieran Devlin is good, but only for cases when there is only one-line blocks with same color.
I can suggest this solution via JavaScript (or just CSS) tho this is not 100% perfect. Here we just making sure that user is on Chromium and then squashing blocks together into each other, therefore filling the gaps. After that, we can use transform scale to return initial size and transform translateX to return it to it's initial position.
if (window.chrome) {
art_div.css({
'letter-spacing': '-0.1em',
'line-height': '1.2em',
'transform': 'scale(1.2, 1) translateX(8%)'
});
}
You can see it visualized in my GitHub issue, maybe i will find something better.
You can use font shadow to fill the gap. I know its a hack but unless you plan to overlap the characters by positioning them in a fixed orientation I don't see how this can be achieved across different browsers.
text-shadow: 1px 0px 0px rgba(0,0,0,1);
Example:
body {
text-shadow: 1px 0px 0px rgba(0,0,0,1);
}
██████████████
Another option is to pad the characters within a container and set the background color the same as the font color. Example:
#container {
background: black;
color: black;
width: 159px;
height: 20px;
}
<div id="container">
██████████████
</div>
Related
This is my problem in short: https://jsfiddle.net/b6wLwkfs/
Long story: I have a div with some text in it. It initially creates some space on top and bottom of my div (this is not padding). I would like my div to only cover the text and not create extra space. This is my only css:
div {
background-color: black;
color: white;
font-size: 50px
}
<div>This is the text</div>
What I am looking for is to narrow down the div to only contains the text without creating any space on top of bottom. I acknowledge that if you tweaking a bit with px, you will achieve that but I am looking for more generic approach since font size will be different by cases.
Your code below is missing a (;) after font-size: 50px; now to achieve the space reduction I suggest you use line-height with the same font-size refer to my correction
Your Code
div {
background-color: black;
color: white;
font-size: 50px
}
My Correction
div {
background-color: black;
color: white;
font-size: 50px;
line-height: 50px;
}
There is likely no 'generic' way to do this, as that spacing you're seeing is actually part of the font face, and whatever adjustments you make to solve the 'problem' for this font, will not necessarily work on other fonts.
For example, just take a look at how Arial displays, as it's different than the default font that is used without setting a specific font-family, and as such a fix for the default font would likely have to be adjusted for Arial.
p {
background-color: black;
color: white;
font-size: 50px;
line-height: 1;
font-family: arial;
display: inline;
}
<p>
Oh hi i'm different
</p>
In the above snippet I've added a line-height of 1 to help normalize the spacing a bit. You could try to adjust further with setting the line-height to be at, or close to the exact font-size in pixels, but this will likely result in undesired spacing if you have lots of text in the element (text should also be in an appropriately semantic element like a p, or li, not just in a div).
In the end, can you achieve the result you're looking for? Definitely. Using things like line-height, margins and/or transforms. But you are likely not going to find a silver bullet to achieve the effect you want, consistently, if swapping out font faces.
As Sebastian Brosch mentioned in the question's comments, working off from Is it possible to change inline text height, not just the line-height? is likely going to be your best path forward.
In CSS, I can set an outline width outline: 1px solid red and I can set its offset (similar to padding) with outline-offset: 5px.
However, this method does not allow for the shorthand method used by padding, like border: 1px 2px 3px 4px and there doesn't seem to be an outline-offset-left: 1px option.
So, is there a way to set different offsets on each side for a CSS outline? Note that I don't want to use padding; it would offset the outlines how I'd like, but it would also add extra padding to elements where I don't want to, which is the whole reason I am using outline in the first place.
According to MDN's docs on Outline, the only properties to set on outline are:
outline-style
outline-width
outline-color
To which outline is a shorthand to concatenate those properties. But there's no side definition, due to the following fact:
Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this...
Since they may not be rectancular, it wouldn't make sense to be able to define left, top, etc, properties...
There is a nice hack you can do to achieve the effect you are after, but it probably has to be done on a case-by-case basis.
My scenario was that I had some content with padding, which contained several html elements including some anchors/links. Let's imagine the scss is something like this:
.contanier {
padding: 15px;
> a {
padding: 8px 0;
}
}
When focusing on an anchor the outline is pretty much touching the text and generally looks poor. Now, as you said, adding left/right padding to the anchors for the sake of an outline would throw off the layout of the content. The anchors would no longer appear inline with other elements in the container such as a heading/paragraph/image/what have you.
So to resolve the problem I added padding to the anchors, and negated it by setting a negative margin:
> a {
margin: 0 -4px;
padding: 8px 4px;
}
Now I have complete control of how the focus appears. There are some use-cases where this solution does not work, for example, if your anchors have a background colour. But for most cases it works pretty well.
Here's an example of code to place a border around span tags on hover:
CSS
p {
background-color: #def;
width: 137px; /* chosen so the text *just* fits, may need to alter
* for different browser or OS
*/
}
span {
margin: 0;
}
span:hover {
margin: -2px;
border: 2px solid #336;
}
HTML
<p>
<span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>
(See demo at: http://jsfiddle.net/sS7vY/)
It uses a -ve margin to compensate for the border and avoid the text shifting position on hover.
On Firefox, hovering over the very last word causes it to wrap over to the next line, which I want to avoid. On Chrome it behaves as I intended and never wraps.
Is this a Firefox bug that needs reporting?
Is there a way to prevent this wrapping in Firefox, in a way that works for arbitrary text? (i.e. adding a couple more pixels width to the outer <p> is not a valid solution!)
Not sure if it's a bug in either browser as I'm not familiar with the inline box model, but using an outline instead of a border seems to work well as outlines don't affect box sizing, even on inline-level boxes:
span:hover {
outline: 2px solid #336;
}
I forded a working solution of your's : jsfiddle.net/dgY4J
It seems to be a mixed of 'box-sizing' and available width situation.
Also, if you use the css box-sizing, you won't have to deal with borders with the negative margins.
One last tip : chosen so the text just fits, may need to alter for different browser or OS || it will do the oposite. No browsers render font type the same.
I want to have a ▲▼ symbol to denote that a specific table column is sortable (e.g. name▲▼ but with the arrows on top of each other). To get that onto one line I have used a list:
<table class="test">
<tr><th>test <ul><li>▲</li><li>▼</li></ul></th></tr>
</table>
The arrows are too big and spaced badly. So, to style the result I used:
th ul{
display:inline-block;
}
.test th ul{
font-size:5px;
margin:0;
padding:0;
}
.test th li{
font-size:5px;
margin:0;
padding:0;
}
This was meant to make the combined character smaller, but font-size seems to have no effect at all on the size of the symbols. How should this be done?
Edit: It now seems that this works perfectly in opera and that this is some firefox (my version is the 32 bit linux 20.0 one) specific issue. In fact it just affects arrow sizes:
<p>▲</p>
body{
font-size:5px;
}
This still results in large arrows. Can anyone else confirm that it's a firefox only issue?
This is just weird, I'll probably just go with using an image.
Maybe this will help. Use a icon font instead of html symbols. https://github.com/aristath/elusive-iconfont
You can also visit a demo page at: http://shoestrap.org/downloads/elusive-icons-webfont/
Alternatively, try http://fortawesome.github.io/Font-Awesome/
Both font sets have up/down carets, but not in one symbol.
You could try the following:
<table class="test">
<tr><th>test <span class="icon-sortable">▲<br>▼</span></th></tr>
</table>
with the following CSS:
th {
outline: 1px dotted blue;
font-size: 1.00em;
}
.icon-sortable {
outline: 1px dotted gray;
display: inline-block;
font-size: 0.50em;
vertical-align: middle;
}
I would use an inline-block to position the two arrows, a bit easier to style and simpler mark-up (fewer tags).
You can set a font-size for the icon either using relative or absolute units depending on your site's styling.
Use vertical-align to position the icon vertically, I used middle, but top, bottom, baseline and other options are available, again depends on your preference.
If you need to move the two symbols close together, you need to wrap them in another tag and adjust the positioning.
I constructed two examples, one basic and the other fancy with more tags to control arrow positioning.
You can also adjust the padding, width, margin of the inline-block for a lot more control.
Fiddle: http://jsfiddle.net/audetwebdesign/XPQPh/
You may have a minimum font size setting in Firefox, preventing the effect of setting font size to 5 pixels. In general, if you need a font size that small, you really need a different approach.
The size of the characters ▲▼ greatly varies by font, and so does their spacing, so you should have a font-family setting for them that suits your needs, possibly a rather large list of fonts, just to be sure (after all, no font is present in all computers).
I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.
This is my current HTML for a content box type display:
<div class="grid_12 boxout-shadow-920">
<div class="boxout">
<p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
</div>
</div>
Boxout CSS:
.boxout {
background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE;
-moz-border-radius:4px 4px 4px 4px;
border:1px solid #DDDDDD;
margin-bottom:15px;
padding:5px;
}
boxout-shadow-920 CSS:
.boxout-shadow-920 {
background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}
Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.
So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.
I'm sure there is an easy answer to this - any help is appreciated!
With the new CSS3 specification we got the property box-shadow that is already supported by Mozilla browsers (through -moz-box-shadow) and Webkit browsers (through -webkit-box-shadow). Since 10.5 pre-alpha also Opera supports this property, too.
So as far as you can accept to display no shadow for Internet Explorer you could stick to this property. The idea behind it is much cleaner because there is no layout specific HTML markup needed.
See here for more information on browser compatibility: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows
For greatest support through most of the browser engines you should use the following three statements:
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
Same technique as rounded corners.
Check out this website for various CSS3 effects, including box shadow (what you're looking for): http://css3please.com/
I'd use the CSS3 box-shadow property, with that IE blur filter on div as a fallback for legacy browsers.