I am using evoPDF to convert HTML files and it seems that text-align:justify is not behaving properly. The spacing happens in between characters, instead of in between words.
What i have used so far without any success:
letter-spacing:0;
text-justify: inter-word;
Set !important to each of those.
Current Result:
Image
Expected Result:
Image
Thank you! :)
As text-justify not supported by many browsers and the way you are using the property it would be safer to use word-spacing as an alternative. According to the MDN docs inter-word is just a variation of the word-spacing property.
You could also try changing the HTTP User-Agent header for the conversion to an agent that may support the property. However, changing the header is is unlikely to affect the outcome.
Related
What does the following CSS do and is it valid?
h4 {
width: 83%;
#width: 75%;
}
It is not valid. #width: 75%; is a syntax error, since # isn't used in CSS property names (although it is used in CSS selectors, to select elements with specific ids). Most browsers will ignore it (hopefully) and only the first rule will be applied.
It might have been someone's attempt to write a CSS comment. This is the valid way: /*This is a comment*/
Edit
I would suggest using a CSS reset file to account for browser differences.
Apparently there's a hash hack which looks exactly like the one you have, but I have no idea what specific browsers the author is trying to target or filter since there aren't any reliable results as to what browsers apply the rule and what don't (that looooooong list of user agent strings isn't what I'd call reliable; I'd call it inconsistent).
In any case, a hash is not a valid character for property names. I'm sure anyone that isn't IE will squarely discard it on sight.
using # before a property is applying different css style for ie 7. Is a css hack like *. To make it valid you can use conditional comments for ie.
From what I've read on http://developer.expressionz.in/blogs/2007/09/08/for-your-ies-only/ the hash-hack is intended to make a rule only visible to IE browsers. Since it is - as already mentioned by others - not a valid property, other browsers will ignore it.
BTW if the second width was not preceded by #, it would take width = 75% and not 83%. The last value always overrides all the preceding ones. As others pointed out, it could be a hack, which I don't know but most likely a syntax error.
To basically answer both your questions.
The # before the property targets IE7 & IE6 (and lower)
No, it's not valid.
I asked the same question, there's more info there that may be helpful to others:
Post: " CSS - "#" sign before property "
I have seen in the comments of Is quoting the value of url() really necessary? and CSS background-image - What is the correct usage? that Mac IE 5 does not support quotation marks inside the url() function.
Also PPK's CSS page does not mention the url() function at all:
http://www.quirksmode.org/css/contents.html
So I would like to know what browser support is like for this function. What browsers recognise the value, which ones require what quotation marks, whitespace, and so on.
I realise that everything released in the past five years probably support all syntaxes. It's the older browsers I am thinking of.
Mac IE5? Serious? :) I think this browser is seriously outdated and not being used anymore :)
Anyhow, according to W3C, it's
body {background-image:url('paper.gif');}
And it works for all (older) browsers. For who are you developing if you need support for this kind of ancient browsers?
I have never ever had any issues with background-image for any browser type.
Unless of course you are putting it as a div with no content and not specifying the width and hight of the element...
example usage of background/background-image
#body {background-image:url('mylovelybg.jpg');}
or the long hand (to allow for color and repeating factors
#body {background:url ('mylovelybg.jpg') repeat-x #fff;}
What does the following CSS do and is it valid?
h4 {
width: 83%;
#width: 75%;
}
It is not valid. #width: 75%; is a syntax error, since # isn't used in CSS property names (although it is used in CSS selectors, to select elements with specific ids). Most browsers will ignore it (hopefully) and only the first rule will be applied.
It might have been someone's attempt to write a CSS comment. This is the valid way: /*This is a comment*/
Edit
I would suggest using a CSS reset file to account for browser differences.
Apparently there's a hash hack which looks exactly like the one you have, but I have no idea what specific browsers the author is trying to target or filter since there aren't any reliable results as to what browsers apply the rule and what don't (that looooooong list of user agent strings isn't what I'd call reliable; I'd call it inconsistent).
In any case, a hash is not a valid character for property names. I'm sure anyone that isn't IE will squarely discard it on sight.
using # before a property is applying different css style for ie 7. Is a css hack like *. To make it valid you can use conditional comments for ie.
From what I've read on http://developer.expressionz.in/blogs/2007/09/08/for-your-ies-only/ the hash-hack is intended to make a rule only visible to IE browsers. Since it is - as already mentioned by others - not a valid property, other browsers will ignore it.
BTW if the second width was not preceded by #, it would take width = 75% and not 83%. The last value always overrides all the preceding ones. As others pointed out, it could be a hack, which I don't know but most likely a syntax error.
To basically answer both your questions.
The # before the property targets IE7 & IE6 (and lower)
No, it's not valid.
I asked the same question, there's more info there that may be helpful to others:
Post: " CSS - "#" sign before property "
Can you use the browser specific prefix in front of all standard tags?
e.g.
#div{
padding:20px;
-moz-padding-bottom:10px;
}
is the above valid CSS for ensuring Firefox has a different bottom padding to all other browsers?
No, it's not a prefix for targetting a browser, it's a prefix that is used for specific non-standard properties like -moz-opacity or -moz-padding-start. It's not available for the standard properties.
First, no, there isn't a prefix for things that are standardized, since they're the same property cross-browser (or should be, don't take this for granted in IE).
Instead of what you're after with this prefix, I'd instead look at a completely different approach...taking out the differences in rendering, instead of trying to fix them, at least as many as possible.
Take a look at a CSS reset stylesheet, to normalize the padding and such across browsers, then look at fixing any remaining quirks.
You can always do it, but the style will be ignored by browsers who don't understand it and the CSS won't pass CSS Validation.
This might be of interest.
-webkit-text-stroke
Works in Firefox browsers as well.
Here's the situation: I'm trying my hand at some MySpace page customisations. If you've ever tried [stackoverflow], I'm sure you understand how frustrating it can be.
Basically it can be all customised via CSS, within a certain set of rules (e.g. the '#' character is not allowed...how useful!).
Have a look at this blog if you want more info, I used it as the basis for my customisations
So the only problem is with the comments section, where 'friends' post whatever they feel like.
It already has...
max-width:423px;
...set on the table, but I've discovered if long URLs are posted in the comment section, it blows out the table width, regardless of the max setting!
Question: Is there a way to manage text that is going to push the width of the table?
Perhaps splitting/chopping the string? Or is there more I should be doing..?
The URLs are posted as text, not hrefs.
Using Firefox and Firebug btw.
Edit: Also javascript is not allowed ;)
Another edit Just checked with IE7, and it seems to work.. so firefox is being the hassle in this case..
Have you tried the various values for the "overflow" css property? I think that may do what you need in some permutation.
a few browsers support word-wrap
ex.
<div style="width: 50px; word-wrap: break-word">insertsuperlongwordhereplease</div>
browser support currently is IE / Safari / Firefox 3.1 (Alpha)
Your options are pretty limited, if you are using only CSS. You can try
overflow: hidden
to hide the offending parts. CSS 3 supports text-wrap, but support for it is probably non-existent. IIRC there is an IE-only css-property for doing the same thing, but I can't remember it at the moment and my Google-Fu fails me.