Hello,

first of all I think the floatox looks really great!

There's only one issue about how the font is displayed in my floatbox. I use the SourceSansSemibold font, size: 14 px, color: rgb(204,204,204).

Here's a screenshot of the same font that I also use outside the floatbox:

http://www.strehmann.com/outside_floatbox.jpg

This is how the font displayed correctly in my opinion.

This Screenshot shows how the same font is displayed in the floatbox, it seems slightly darker and somehow "coloured":

http://www.strehmann.com/floatbox.jpg

Could you please help me with this?

Thanks very much
Thorin

Hi, and welcome back

Just because a font is defined for use on some elements of the base page does not mean that that is the font that is used in the floatbox captions.

The caption font is defined in floatbox.css as being "Verdana, Arial, Helvetica, sans-serif;", 12px. The font color is determined by the colorTheme in use and for the black color theme is "#aaa", dialed back a little bit from bright white.

If you want to style your captions with a particular font face, color, or any other css assignments, add the captions as html content and style the elements in that html.

The "Captions" section of the Instructions has a pretty good write-up on how to get stylable html into your captions.

Cheers...

I already created a div for the floatbox-font:

div#fbCaption a{
font-family:'SourceSansProSemibold';
font-size: 14px;
color:rgb(204, 204, 204);
word-spacing: 1px;
text-decoration:none;
margin-right:30px;
}

The font in the floatbox is the SourceSansProSemibold but still looks strange somehow as it is shown in the screenshots above.

This is the page I'm talking about:

http://strehmann.com/wordpress/en/gallery/multiple-exposures/

("View Slideshow" at the top right has the same font settings and on a closer look you can see a slight difference to the font in the floatbox.)

Thanks!
Thorin

I have to agree with you that the difference is slight. It takes a pretty close inspection with good eyes to spot a difference. Here's the two side by side, giving them both approximately the same background color, as seen by Firefox.


If we look closely, we can see that the View Slideshow characters are slightly thicker than those in the caption. This makes sense in the context of your page, because the background of the "View Slideshow" text is actually semi-transparent, with a 90% opacity provided by a background image of bgopacity090.png. Fonts over top of transparencies display a little different than fonts over top of fully opaque backgrounds because transparency is used to anti-alias font outlines. The computation of the two transparencies together seems to result in a slight smearing or haloing of the font lines.

The differences are so slight as to be not worth chasing (IMHO) and really have nothing to do with Floatbox per se. The difference is fully accounted for by the differing backgrounds behind the chunks of text. If you really need the two to be exactly identical, display them against the same opaque background.

Quote

The difference is fully accounted for by the differing backgrounds behind the chunks of text.

I'm afraid that's not the case. When making the black background brighter and the grey background darker as you did the fonts may look more similar. But this kind of picture editing has nothing to do with the actual look of the fonts.

Quote

If you really need the two to be exactly identical, display them against the same opaque background.

Well I did so and here's an example of the font in the floatbox (left) and the font outside the floatbox (right), both times on a black background.



What's most significant to me is that the font in the floatbox is not made of one shade of gray but there seem to be colors involved. As if the font was resized using a strange algorithm or something. Just appears kind of "crippled" to me.

Anyway, I know the difference is rather small but it bothered me from the first time I saw it.

I thought I'd not be the first one mentioning this issue, guess I was hoping that you'd come up with an idea or even a simple solution for it. Now, it seems I gotta live with it.

Thorin

No, no, I didn't photochop that screen capture of the fonts. I manipulated the floatbox options by setting boxBackgroundImage to the same bgopacity090.png file and by setting overlayOpacity to 0. I then dragged the floatbox so that the text would be adjacent, did a screen capture, cropped that capture and posted. No editing involved.

I took one last kick at this by copying your page, changing the background of the text on the main page to black, removing some styling from an adjacent h1 element that appeared to be extended to underneath the other text, changing the text itself to be the same words as the caption, moving the caption around in the box to make it easy to position next to the page text, and screen-captured the results - this time in Chrome. Here's the unedited screen capture:


The two text chunks look identical to me, but cleaner than the example you posted. I agree yours looks a little anemic and slightly colored. There appears to be something about your particular browser or OS that is renedering the font differently than does my system. I don't recall anyone else ever raising a concern about font-rendering inside the floatbox components.

But sorry, there's nothing Floatbox can do, or is doing, to modify how the font is rendered and anti-aliased. There's no unusual scaling or obscure styles applied to the captions by the Floatbox code.

Cheers...

Thanks a lot for your effort! Yes your screenshot looks way better. So I downloaded Chrome to test it myself and voilà, it also looks fine. This helps me a lot to know that it has nothing to do with floatbox but probably with Firefox instead.

Thanks!
Thorin