I have run into this problem a few times. I have no problem limiting characters in a string to a specific number. However, some characters are longer than others so it wraps to another line or makes my DIV element wider and not uniform with the rest of my website.
For instance:
Literacy - Is it the Sa
Machu Picchu, Cuzco, Pe
are the exactly the same amount of characters (23) including spaces but the Machu Pichu one is longer in terms of the actual width on screen.
Is there any way to have a uniform size for a string that is based on the width of the actual string as opposed to the number of characters? Someone has had to have come up with a solution to this before right?
First (obvious) solution: switch to a fixed-width font such as Courier, Lucida Console, Consolas, etc.
Second solution: use the GD library to write strings to a graphic object and measure that object.
You'd probably have to play with GD and imagefontwidth(): http://ar2.php.net/manual/es/function.imagefontwidth.php
Without writing an algorithm in PHP to limit characters based on "font-widths" for the specific font you are using, you can use a monospace font.
Alternatively, I'm sure a JavaScript solution could be written as well to test the widths, but I'm not sure how off of the top of my head.
This can't be done in PHP -- the best you can do is approximate. Different browsers and different operating systems render font widths differently for the same font. So even if you manually stored an array of character font widths for the font on your browser and os, it might not match up with others.
It's usually better to work your design around the possibility of different-width fonts than to try to force it.
That being said, this can be done perfectly (without approximation) in javascript, albeit with a little bit of a hack. There are a number of possible methods, but here's one: Start by rendering the full string in a div that has width that you are looking for, then measure the div's height. If it is larger than one line could possibly be, then start a loop progressively removing the last word. Keep going until the height of the div is for one line.
Use CSS for formatting so they all have uniform widths - no jagged edges on the right side. Something like this:
p { text-align: justify; }
Had some fun workin on this CSS + JS solution. It wasn't tested intensively (Firefox + IE7/8) but it should work ok...
<script type="text/javascript" src="jquery.js"></script>
<style>
.monospaced, .not-monospaced{
font: normal normal 16px/16px Verdana; /* not monospaced font */
clear: both;
}
.monospaced span{
float: left;
display: block;
width: 16px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$('.monospaced').each(function(){
var monospace = $(this).html(); // .trim() does not work at IE http://api.jquery.com/jQuery.trim/ (view comments)
monospace.replace(/(^[\s\xA0]+|[\s\xA0]+$)/g, '');
mono = monospace.split('');
for(i = 0; i < mono.length; i++){
if(mono[i] == ' ')
mono[i] = ' ';
mono[i] = '<span>'+mono[i]+'</span>';
}
$(this).html(mono.join(''));
});
});
</script>
</head>
<body>
<div class="not-monospaced">
This is supposed to be monospaced...
</div>
<div class="not-monospaced">
mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
</div>
<div class="monospaced">
This is supposed to be monospaced...
</div>
<div class="monospaced">
mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
</div>
</body>
Related
How does the php echo or print effects the letter lowercase to become uppercase? or is it a css issue?
for example:
echo "Against";
// Outputs AgaInst for me
in the css there is one parent class that says: text-transform:uppercase; but the specific title overwrites that css with text-transform:capitalize; if i just write it in plain html it works fine but when i echo it with php it does turn i to I!?
Please note the AgaInst and TIed in table headers.
Found the solution as #Mathias Pointed out the font size.
Problem was the font size, it happens for for sizes smaller than font-size:12px;
It seems to be the rendering of the font in that small size.
Try increasing the font size or use a different font. When I try Open Sans in 10px or smaller in Chrome on OSX I get the same effect. Different OS and different browsers might render the text differently.
PHP has absolutely no effect what so ever, on the capitalisation of a string, unless passed through a string modification function.
The code <?php echo 'Against'; will simply output the word Against. The display of this word is entirely up to the HTML, CSS, the viewing browser and even the viewing OS and machine.
I am reading a string my user is inputting via PHP and I need to spit it back out in a div tag. This div tag has a width of 500px. If the user enters a word that is too long, the word will overflow the container. If the user enters two words that are almost two long, it will split into two lines.
My question is how do I determine if a word is too long or not? I have tried setting a character count, which is not an accurate representation of length as certain characters (ie W and I) have different widths. Is there a solution?
My current algorithm is to break the user input into chunks, each of 40 characters, and output it.
If you want to still implement your character count mechanism you can; you just need to make sure your text is mono-spaced (same width). To do this you can just add <pre></pre> around your text block; this can also be accomplished with <code></code> and <tt></tt> but if you want a simple CSS solution you could use.
<style>
.myclass { word-wrap:break-word; }
</style>
<p class="myclass">some text</p>
Usually you shouldn't use PHP for things like that. Try CSS instead:
.break { word-wrap: break-word; }
will do the trick
you can simply break-up words that are larger than, say, 20 characters - into chunks, using the <wbr> tag. Here's some more info: http://motyar.blogspot.co.il/2011/07/tell-browser-they-may-break-your.html
I'm attempting to align a text-based list of items for an e-mail. Basically the problem I have is that it only works with fixed-width (monospaced) fonts - I'd like a script that somehow can align it based on the width of each letter in a standard Arialish font.
function sprintf_nbsp() {
$args = func_get_args();
return str_replace(' ', ' ', vsprintf(array_shift($args), array_values($args)));
}
$format = '%-6s%-\'.35.35s...%\'.10s<br>';
$str = sprintf_nbsp($format, '1', 'A list of items - this is the first', '$49.99');
$str .= sprintf_nbsp($format, '100', 'This is something else', '$4.99');
$str .= sprintf_nbsp($format, '5', 'A book', '$499.99');
$str .= sprintf_nbsp($format, '16', 'Testing the function', '$49.99');
echo '<div style="font-family:Courier">'.$str."</div>";
echo '<br><br>'.$str;
(the sprintf_nbsp() may not be necessary, I just found it on the php forums, I'm open to other solutions)
fixed-width (monospaced) fonts - I'd like a script that somehow can
align it based on the width of each letter in a standard Arialish
font.
Simply put, this is impossible.
With a fixed-width font every character has the same width, hence the name, fixed width.
With other fonts this is not the case. For example, you can plainly see that the i is much narrower than the M.
You can't know which font the user uses, even if you specify something like font-family: Arial this may not always work, different systems (OSX, X11, etc.) use different fonts, and some users also override font website's settings, etc.
And even if you knew for 100% certainty which font the user uses, it would be pretty much impossible to align everything to be pixel-perfect.
So, you have two options: either use a fixed width font ("Consolas" is a standard Windows font which looks fairly good), or use a different layout.
What you probably want is something like this:
<style>
span { display: block; width: 20em;}
</style>
<span>Some text</span>
<span>Hello, world!</span>
<span>A swallow could not carry a coconut</span>
Here, every <span> is the same width (20em) regardless of the amount of text it contains.
Using spaces to align stuff is almost always a bad idea. Using CSS is not only much cleaner, it's also a lot easier.
I wonder if there is a way to display paragraph text with diagonal indent to be some thing like that!
Keeping in mind that this text is written in WYSIWYG editor (Contains html tags).
I was thinking if there is a way to count the words within the paragraph excluding html tags and then making some equations to increase the indent of the text every line by jQuery or Javascript.
Is there any suggestions to do that ?
You can skew the containing div
.holder{
transform:skew(-40deg);
}
<div class="holder">
<span class="rotate">Just </span>
<span class="rotate">Like</span>
<span class="rotate">This! </span>
</div>
and then unskew each word inside it.
.rotate {
transform: skew(40deg);
}
https://jsfiddle.net/dcst94sv/5/
There's a very easy way to do this with CSS. Create a list. Then use li::before to add left-side padding to the list items. Set the li::before element to be a tall and thin block floated to the left. Each one will create left side padding for its parent list item and all those below it.
Like this:
li::before {
content: "";
display: block;
float: left;
height: 50px;
width: 10px;
}
<ul>
<li>sancti et dilecti</li>
<li>viscera misericordiae</li>
<li>benignitatem </li>
<li>humilitatem</li>
<li>modestiam</li>
<li>patientiam</li>
<li>caritatem</li>
</ul>
To count the number of words within the paragraph excluding HTML tags, use:
$tagless_content=strip_tags($content);
str_word_count($tagless_content);
Update
Here is code to increase text-indent via jQuery
jQuery.fn.stripTags = function() {
return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') );
};
then use the String.length JavaScript property
var len = $('<p>').stripTags().length();
for(var i=0;i<len;i++)
jQuery('<p>').css('text-indent',+i+'px');
Reference
Strip tag via jQuery
strip_tag PHP function
str_word_count PHP function
There's no straight-forward solution that I am aware of, since, as you indent each line of the text more and more, the length of space that each line can take up will decrease, creating new lines.
For example:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
Post-indentation:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEX
T
TEXTTEXTTEXTTE
XT
TEXTTEXTTEXTT
EXT
TEXTTEXTTEXT
TEXT
This problem will exist if (1) you are processing lines created due to word wraps, and (2) if you detect all of the lines at once and then do all of your indents (as opposed to an algorithm that updates the <p>'s text. If the font family is mono-spaced font, then this can be adjusted for.
Best-case scenario is that these are <br>-terminated lines, in which case this would be very easy.
Slightly more difficult would be doing this with a mono-spaced font.
Worst-case scenario, describe above, would require searching for the first line that is not indented, then indenting it, updating the <p>'s text, and then repeating the process until the text is completely gone through or if the amount of indention exceeds with width of the <p>.
I would suggest asking your question again, providing the following information:
- are the lines terminated with <br> tags, or are they word-wrapped? If it is word-wrapped, is the font mono-spaced or variable-width?
After many Searching stuff I found something useful http://www.csstextwrap.com/examples.php
I think after some modifications it will fit my requirements. thanks for your highly appreciated Responses.
I have an image as the background for an input field. I can set the line-height and font-size easily but when you click inside the input, the cursor line is way outside the background image.
Is there a CSS statement (Is that you call them?) that controls this?
You're probably using line-height to display the text in the input as vertically centered. However, it is also the culprit of your issue. Try experimenting with padding settings of the input instead, while leaving the line-height set to normal.
Problem with using padding is that it is displayed inconsistently in different browsers while line-height in input text areas are displayed equally in IE7, IE8, IE9, Safari, Chrome, Firefox and Opera. It's seems like you have to choose between input cursor or input text vertical alignment.
Yes, line-height.
Try:
input {height: 28px; font-size: 10px; padding: 7px 5px;}
The post Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS may help you.
It seems that your padding size affects the cursor size and position.
Will be good if we have the code , you also can try
background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;
depends of your images size
Using a line-height: normal or a line-height:inherit did the trick on my side.
Thanks for your answers guys.
the text in input tag can be vertical centered automatically, do not use line-height on it.