line height lower than 1.2em
mattyk
Reading the the documentation it seems that we can't have a line-
height less than 1.2em
Why do you think this is? Surely that's never going to be low enough
for some projects.
Does anyone know of a way around this, I have a rather large font that
only has about 2-3 words per line. 1.2em is far too much line-height
for my project....
might have to go back to image replacement I suppose!!
Thanks
M
Simo Kinnunen
It's a limitation of the current rendering technique we use.
Unfortunately there are no workarounds at the moment, but I'll keep
this in mind and see if something can be done about it.
Simo
mattyk
>
> - Show quoted text -
antitoxic
think.
Let's say we have to apply custom font to any link and therefore we
have:
Cufon.replace('a');
In every standard browser you can do this:
$('a span.cufon-canvas').css('height','XXXpx');
(Where XXX is the desired line-height). I've tested firefox, safari,
opera. All good.
IE:
$('span.cufon-vml').css('float','left');
And if the <a> element is inline than apply display:inline-block to
gain the normal flow.
Why not implement this into the cufon itself ? Does anyone have any
drawbacks from this solution ?
All best,
Join a beerfest,
antotixic @ www.toxdox.net
On Aug 13, 11:56 am, mattyk <keog...@googlemail.com> wrote:
> OK - thanks for clearing this up....
>
> On Aug 12, 6:59 pm, Simo Kinnunen <sor...@gmail.com> wrote:
>
> > Hi,
>
> > It's a limitation of the current rendering technique we use.
> > Unfortunately there are no workarounds at the moment, but I'll keep
> > this in mind and see if something can be done about it.
>
> > Simo
>
> > On Aug 12, 2009, at 3:03 PM, mattyk wrote:
>
> > > Hi all
>
Simo Kinnunen
It will be a part of a bigger patch that fixes a few other (related)
issues as well.
Simo
none none
available?
I really need this fix.
Simo Kinnunen
Probably in about 2-3 weeks, when my other projects should be
finished. Sorry! There's just not enough time.
Simo
fyankai
I've added this in my header:
Cufon.replace('h2');
$(document).ready(function(){
$('h2 span.cufon-canvas').css('height','20px');
$('h2.cufon-vml').css('float','left');
});
- but that doesn't seem to have any effect on IE. I'm using HTML
strict, and have tried tweaking the CSS line-height but to no avail...
Any ideas?
Simo Kinnunen
This is the DOM structure in IE:
<span class="cufon cufon-vml">
<span class="cufon-vml-canvas"></span>
<span class="alt"></span>
</span>
And in other browers:
<span class="cufon cufon-canvas">
<canvas></canvas>
<span class="alt"></span>
</span>
Applying your styles to span.cufon instead of span.cufon-canvas should
work.
Simo
Charlie
people have mentioned.
On Sep 3, 6:34 pm, Simo Kinnunen <sor...@gmail.com> wrote:
> Hi,
>
> Probably in about 2-3 weeks, when my other projects should be
> finished. Sorry! There's just not enough time.
>
> Simo
>
> On Sep 3, 2009, at 12:08 AM, none none wrote:
>
>
>
Simo Kinnunen
It's going to be a part of the magical "fix everything" release
(1.10). No exact release date is planned but it's probably going to be
somewhere around the end of the next week / the week after that due to
other things (still) keeping me busy.
Simo
antitoxic
(somewhere above) solution.
You can see a demo at:
http://toxdox.net/uploads/tests/cufonlineheight/check.html
It is a stripped version of a website i've made.
In the example i am replacing the text from the links in the menu, the
h2 title, a paragraph and a SPAN element to check inline support
Cufon.replace('#menu li a', { textShadow: "1px 1px #cecece" });
Cufon.replace('h2', {textShadow: "1px 2px #cecece" });
Cufon.replace('p');
Cufon.replace('span.spun');
And basically this is the important part:
// ---------- NORMALISE THE LINE-HEIGHT TO 1
// ---------- (done because of IE bug that if defined for the
lineheight more than 1em it acts as multiplier to any value defined
after the text is replaced with Cufon)
$('#menu li a').css('line-height','1em');
$('h2').css('line-height','1em');
$('p').css('line-height','1em');
$('span.spun').css('line-height','1em');
// ---------- AFTER the normalisation , execute replacement of text
---------
Cufon.now();
//--------- Function with basic intelligence to fix the lineheight
-------------
function fixLineHeight($replaced, lineHeight, clearFloat) {
$replaced.each(function(){
var $current = $(this);
if (clearFloat==null) {
clearFloat = false;
}
var clearFloatClassname = 'fltbox';
var cufonSpanSelector = ie ? 'span.cufon-vml' : 'span.cufon-canvas';
var $cufonWords = $current.children(cufonSpanSelector)
var $cufonSiblings = $current.children(':not('+cufonSpanSelector
+')');
if ($(this).css('display')=='inline') {
$cufonWords.css('display','inline-block');
} else {
$cufonWords.css('float','left');
$cufonWords.css('display','inline');// IE floats margin bug
$cufonSiblings.each(function(){
$sib = $(this);
if (!($sib.css('float')=='left' || $sib.css('float')=='right') ) {
$sib.css('float','left');
$sib.css('display','inline');// IE floats margin bug
}
});
if (clearFloat && !$current.hasClass(clearFloatClassname)) { //
$current.addClass(clearFloatClassname);
}
}
$current.css('line-height', lineHeight);
$cufonWords.css('height', lineHeight);
});
}
// ---------- Call function for replaced elements
fixLineHeight($('#menu li a'),'3px');
fixLineHeight($('h2'),'1px');
fixLineHeight($('p'),'8px');
fixLineHeight($('span.spun'),'8px');
antitoxic
inline-block properly then the function can be reduced to :
function fixLineHeight($replaced, lineHeight) {
var $current = $(this);
$cufonWords.css('height', lineHeight);
});
}
Webkit based (Safari, Chrome) browsers in their latest versions have
some issues. Otherwise it is better to use this method.
Cheers all
antitoxic
first:
/*Use Object Detection to detect IE6*/
var ie = document.uniqueID /*IE*/
&& document.compatMode /*>=IE6*/
&& !window.XMLHttpRequest /*<=IE6*/
&& document.execCommand ;
That's all I believe. Sorry for the misleading.
antitoxic
It's problem of the selector. Cufon now uses it's own tagname 'cufon'.
The solution above is teste on 1.03 version. For version when you can
see <cufon> in the code use:
function fixLineHeight($replaced, lineHeight, clearFloat) {
$replaced.each(function(){
var $current = $(this);
if (clearFloat==null) {
clearFloat = false;
}
var clearFloatClassname = 'fltbox';
var $cufonSiblings = $current.children(':not(cufon)');
if ($(this).css('display')=='inline') {
$cufonWords.css('display','inline-block');
} else {
$cufonWords.css('float','left');
$cufonWords.css('display','inline');// IE floats margin bug
$cufonSiblings.each(function(){
$sib = $(this);
if (!($sib.css('float')=='left' || $sib.css('float')=='right') ) {
$sib.css('float','left');
$sib.css('display','inline');// IE floats margin bug
}
});
if (clearFloat && !$current.hasClass(clearFloatClassname)) { //
$current.addClass(clearFloatClassname);
}
}
$current.css('line-height', lineHeight);
$cufonWords.css('height', lineHeight);
});
}
function fixLineHeight($replaced, lineHeight) {
$replaced.each(function(){
var $current = $(this);
$cufonWords.css('height', lineHeight);
});
}
steffn
simplified Anton's workaround to make it easier to build upon the
"important parts" If there are any other novices that come across
this group I've uploaded it here: http://pastebin.com/f457087ee
Thanks again Anton.. A few bucks found their way to your paypal!
digitalbart
FF3.5 but I still am having a problem with IE8 any other suggestions?
Christopher Bullen
and "descent" values which effectively hold the top and bottom reaches
of the font. This will allow you to reduce the natural line-height of
the font itself.
Without knowing exactly how the rendering process works I assume this
will work consistently across all browsers - I've only tested it in
Firefox and Chrome.
Safalta
I have tested your method in it works in Safari!
Anyway what units are those, ascent and descent?
mattyk
hopefully fix this? Also, is that still the plan as I can't see it
mentioned directly in the changelog.
many thanks...
mattyk
afraid that it doesn't work in IE7 (the only one I've tested at the
moment).
I haven't yet tried the other techniques above but it does seem a
shame to have to start hacking around. I was really hopefull of this
technique as I'm not really enjoying @font-face's rendering with IE.
One day something will just work!!
Anyway thanks everyone for their help. Hopefully a way around it will
be in the next release.
On Jan 14, 6:00 pm, mattyk <keog...@googlemail.com> wrote:ally.
Simo Kinnunen
Yes, it will be fixed in 1.10 (code name "soon™"). I'm terribly sorry for having had to delay the release so many times, my schedule's been failing all over. Don't worry though, 1.10's definitely on its way; most of the work has already been done (even if has not been pushed to GitHub yet).
Simo
> --
> You received this message because you are subscribed to the Google Groups "cufón" group.
> To post to this group, send email to cu...@googlegroups.com.
> To unsubscribe from this group, send email to cufon+un...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/cufon?hl=en.
>
>
Gareth Evans
mattyk
this.
Thanks for all the hard work you must be putting in on this!!
M
> > cufon+un...@googlegroups.com <cufon%2Bunsu...@googlegroups.com>.
> > > For more options, visit this group at
> >http://groups.google.com/group/cufon?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "cufón" group.
> > To post to this group, send email to cu...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > cufon+un...@googlegroups.com <cufon%2Bunsu...@googlegroups.com>.
> > For more options, visit this group at
> >http://groups.google.com/group/cufon?hl=en.- Hide quoted text -
mattyk
- don't mean to hassle, its just that I'm about to start a new project
and if this is coming out soon I'd prefer to use Cufon.
Cheers
M
On Jan 21, 5:45 pm, mattyk <keog...@googlemail.com> wrote:
> Going to stick with image replacement for now but looking forward to
> this.
>
> Thanks for all the hard work you must be putting in on this!!
>
> M
>
> On Jan 21, 1:43 am, Gareth Evans <agr...@gmail.com> wrote:
>
>
>
> > Thanks for the update Simo - looking forward to it.
> > "soon™" should fix a lot of problems. :)
>
> > Gareth
>
> > On Thu, Jan 21, 2010 at 10:58 AM, Simo Kinnunen <sor...@gmail.com> wrote:
> > > Hi everyone,
>
> > > Yes, it will be fixed in1.10(code name "soon™"). I'm terribly sorry for
> > > having had to delay the release so many times, my schedule's been failing
> > > all over. Don't worry though,1.10's definitely on its way; most of the work
> > > has already been done (even if has not been pushed to GitHub yet).
>
> > > Simo
>
> > > On Jan 19, 2010, at 7:55 PM, mattyk wrote:
>
> > > > I've tested Christopher Bullen's technique (ascent / descent) but I'm
> > > > afraid that it doesn't work in IE7 (the only one I've tested at the
> > > > moment).
>
> > > > I haven't yet tried the other techniques above but it does seem a
> > > > shame to have to start hacking around. I was really hopefull of this
> > > > technique as I'm not really enjoying @font-face's rendering with IE.
>
> > > > One day something will just work!!
>
> > > > Anyway thanks everyone for their help. Hopefully a way around it will
> > > > be in the next release.
>
> > > > On Jan 14, 6:00 pm, mattyk <keog...@googlemail.com> wrote:ally.
> > > >> I hate to hassle but is there a release date for1.10which will
> > > >> hopefully fix this? Also, is that still the plan as I can't see it
> > > >> mentioned directly in the changelog.
>
> > > >> many thanks...
> > > > --
> > > > You received this message because you are subscribed to the Google
> > > Groups "cufón" group.
> > > > To post to this group, send email to cu...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > cufon+un...@googlegroups.com <cufon%2Bunsu...@googlegroups.com>.
> > > > For more options, visit this group at
> > >http://groups.google.com/group/cufon?hl=en.
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > > "cufón" group.
> > > To post to this group, send email to cu...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > > cufon+un...@googlegroups.com <cufon%2Bunsu...@googlegroups.com>.
> > > For more options, visit this group at
> > >http://groups.google.com/group/cufon?hl=en.-Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -