Wordpress FLIR (Facelift Image Replacement) plugin clipping off end of text - wordpress

I'm using the FLIR for Wordpress plugin (v0.8.9.2) with FancyFonts enabled. I'm running Wordpress 3.1. The problem I'm having is that it appears the plugin is cutting off a couple pixels off of the end of some of the text that it generates. It doesn't do it for all text, but where it happens, it happens consistently.
Here are some examples:
In my search for a solution, I've found a number of people with this issue, but never any solutions. Any ideas would be greatly appreciated. Thank you!

I know this was asked quite a while ago, but while researching the problem I came up with a solution. Every page I'd read on this was a bunch of people bickering about the source of the problem and reproducing it, but nobody provided a solution.
This doesn't fix the problem at its source, but it works perfectly. Open generate.php
Find:
$FLIR['text'] = html_entity_decode_utf8($FLIR['text_encoded']);
Replace With:
$FLIR['text'] = html_entity_decode_utf8($FLIR['text_encoded']) . " ";
All it does is force a space after every input string. The space is rendered along with the rest of the text, but is cut off (so you don't see it). This doesn't add the space to the actual HTML, so if it's rendered using a text-browser, rendered without FLIR, or accessed by a crawler (for SEO) the additional space will not show. It is only inserted into the PHP function which creates the image.
After searching for about an hour, I thought it would be helpful for there to be at least one fix on Google.
EDIT: This doesn't work for text with letter-spacing. I was about to give up and just not use letter spacing, but I found this this worked (again, not solving the problem at the source but fixing the visual issue in the same way). Open inc-flir.php
Find:
return rtrim($ret);
Replace With:
return $spacetxt . rtrim($ret) . $spacetxt;
This inserts the same amount of space on either side of the image as are in-between each character. I added the spaces to both the left and right side so that the text will be mostly centered.
EDIT AGAIN:
Oh yeah! And don't forget clean both FLIR's cache and your browser's cache or you wont see the updates!

Thanks. i would use font-face to fix the problem, but BOTH answers (on those php´s) made the trick.
The problem was with stable version 1.2, then I found v2.0beta3 out there. PROBLEM WAS WITH CHROME , by the way...
Oh... i you use mode=´wrap´, you´ll probably still have the problem with chopped text at the last part of the paragraph. In a phrase, the width of an H1 cuts off the last part of the letter, so I added a non breaking space directly to the problematic word.
Example B&A:
<h3>Nuestra visión de la Seguridad Informática </h3>
then...
<h3>Nuestra visión de la Seguridad Informática </h3>
Voilá!
So, three patches to fix an OLD php font plugin... and your help was gold for me. Thanks!

Related

Barlow rendering difference between Google Fonts example page and usage in a separate page

We're using Barlow, available for free from Google fonts, in a web app. Here's the way a sample phrase looks when rendered on Google's example page. (If you want to reproduce it, you will need to enter the custom text yourself and adjust the slider to 14px.)
Note, in particular, the distinct space between the bottom of the i and its dot above, as well as the clarity of the top part of the f.
This is how the same phrase looks when rendered in our app, as reproduced in this Code Pen.
Note the muddy space between the i and its dot, as well as the muddy top curve to the f.
I've tried looking through all the styles on the elements in question, and I can't find any style that should affect these differently. The network tab clearly shows that the bold version of the font is being loaded; it doesn't look as if this could be faux bold.
This may seem trivial, but we've actually had quite a few complaints about how the font looks in our app, specifically that the bold, lowercase i looks like an l.
Anyone have an idea what might be happening here?
Update: Using Chrome on a Mac; I can confirm the same issue in Firefox. This is on an external display... on a retina there's no problem, as there is way more detail.
The problem turned out to be a problem with the source repo: "hinting got missed in the most recent commit" and the Google specimen (which looked correct) was "actually running an earlier version."
Happily, the maintainer was able to get the problem fixed with a subsequent version.

Disappearing whitespace when inspecting element in Chrome

I've got a super strange and hard to diagnose issue. Hoping that someone on this forum has run into it before. Basically, I have a wordpress + woocommerce page loading like this:
As you can see there is a lot of extra whitespace. The problem is I can't figure out where the whitespace is coming from because every time I inspect element, the page removes the whitespace immediately and it looks (correctly) like this:
If I keep the "inspect element" window open and refresh the page, the whitespace returns, but as soon as I change the CSS in any way whatsoever (ie remove a random attribute or change anything), the page once again fixes itself.
If I locate the area where the whitespace should be (by not changing anything), there is literally nothing there that the whitespace is attached to. It's as if it's invisible.
I'm using Chrome (34.0.1847.131 m). Any ideas what could cause this strange behaviour?
This seems like an issue, somehow being caused by javascript. I've worked with WC before, and the JS they use is really buggy. I'd suggest trying to turn off javascript, and see if the issue still occurs. The next place to check would be the template itself. After that, check woocommerces filter set/action hooks. From my experience, WC's templates are super badly done (Seriously, who still uses tables). It caused me all sort of weird headaches as well.

Horizontal scroll - syntaxhighlighter

I was googling to find a solution for this forever, I was so close but still can't find the problem...
The closest solution I found was at this site But:
I want exactly the opposite of what this guy posted: Automatic line break in js SyntaxHighlighter
He wants instead of horizontal bar to break the code down, but what do I want is instead of breaking the code down, to display a horizontal bar.
I've used SH on multiple projects and never actually had this issue till now.
I've installed it in wordpress as a plugin in a custom theme, I modified the theme css file(s) and the syntax highlighter's file(s) (.css), but still nothing's going on.
Here's a screenshot
If you have any suggestion what the problem might be, please tell me - any help is appreciated.
I think what you are looking for is a combination of overflow and white-space css properties.
pre {overflow:scroll;}
.pre-wrap {white-space:pre-wrap;}
Please see the footle here

JQuery Plugin (Hover-Caption) Adding Offset to Images In Internet Explorer (all versions)

I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that

In-text hyperlinks shown by Internet Explorer without the following space. What can be the reason? YUI?

I've a problem which is most likely some ugly CSS mistake, but I just can't spot the solution (and a few changes I tried did not help).
Some of in-text hyperlinks (not all!) are shown by Internet Explorer without the following space.
here is the example
See the link WatchBot just below the Rationale title (and a few similar links deeper in the article). Firefox, Opera, Chrome, Konqueror - all display it properly: WatchBot can. IE (6.0 but IIRC also 7.0) displays it as **WatchBot***can*.
I am using Yui-reset and yui-base. Is it possible that those libraries cause the problem?
Do you have a script running on, and altering, the content in any way? I say this because the page loads normally initially, but looks as though it undergos some modification later in the loading lifecycle.
If you think reset or base are making this happen try removing them one at a time - I haven't had any experience of this error before however (I usually use the full whack: Reset, Grids, Base and Fonts).
What I did notice however is that the first WatchBot link of the page is simply this:
<p>Have you ever been curious how is
WatchBot
picking the games to observe and save? Here is the explanation.</p>
Where as the second link looks like this:
<span>Due to the FICS limitations </span>
WatchBot<span> can
I have no idea what that second span is doing there - might be something to check up on. (It validated fine however - so there's definitely an closing span somewhere).
I'd say a good place to start would be to but a space after the anchor but before the span, rather than right after the span start tag.
Current state of the things: as steve_c spotted first, and buti-oxa confirmed, it looks like the layout is being spoiled by javascript (and as Ross noted, some extra spans are injected). Thank you all, I missed it.
I am to make experiments and selectively disable those scripts (analytics and google ads) to check whether it helps (my current bet is that maybe I have some HTML error or naming conflict)
Did you try to disable pageTracker? It seems to be the only script on your page, and it looks fine to me in its static form.
EDIT: I wondered what span Ross was talking about - I did not see any. I viewed the source. I just learned that Firefox allows to see both source and generated source (Toos/Web Developer/View Source). Sure enough, generated source has additional span inserted.
Solution: my page was spoiled by the text-link-ads script (which, in fact I activated on English blog by mistake - this is script by adkontekst.wp.pl, Polish firm). After disabling it everything is OK.
Thanks for everybody who pointed me into the right direction.

Resources