In my website, the user's username is always displayed at the top of every page (along with the site title, other page links, etc.) in a font size of "3"
It took me a really long time to figure this out, but it eventually came to my attention that the users with really long usernames ended up messing with the spacing at the top of every page and all the text gets pushed down a line, making the whole thing look ugly as sin (it's only visible to the individual user since it's their username, but I don't want any of my users seeing it at all).
I'm not asking how to find the number of characters in their name -- what I want to know is how I can determine the physical amount of space their name will take up and, in the event it will be too long, reduce the font size to 2, or even 1 if necessary.
The reason why a simple strlen() wouldn't work is because of the potential space differences ("Tragic Dionysus" takes up less room than "HERSHEYFEVER", regardless that the former has more characters in it).
An extensive Google search continually leaves me with more character counting methods, so I'm left clueless.
You cannot use PHP for this - because so much depends on front-end styling (font-families, font-size, font-styling, etc.). You can use jQuery to ascertain the element length, and apply certain functionality if needed:
HTML
<span id="box"><?=$yourString?></span>
jQuery
$(function() {
var box = $('#box');
if (box.width() >= 50) {
box.addClass('massiveLength');
}
});
Or, if you want to apply something to all elements, here's a jsFiddle showing you how.
It is fundamentally impossible to do this well on the server.
Instead, use Javascript to get the actual width of the element, then reduce its font size.
I'm just gonna toss this out, but if you wrap the username block in a an element and give it a max-width, it might solve your problem.
<span style="max-width: 50px; overflow: hidden;">The Username Goes Here</span>
Related
This is a problem I seem to run into over and over with clients. They have a limited amount of space for a title, say like an image caption. The space is limited because it's in a series of boxes floating next to each other, let's say. However, the client baulks at an attempt to put a cap on the title length. Yet at the same time, they don't want this text to wrap.
I've tried several different methods to tackle problems like this over time...something similar to text-overflow, when strlen() is used to add ellipsis to the overflowing text, with the full text in a title attribute, I've tried re-sizing fonts based on strlen() to make text fit.
Just wondering if anyone had a more elegant solution for situations like this?
I may be misunderstanding you, but if you're saying a valid solution is the ellipsis then that can be accomplished in CSS using the following stylings
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
No need to use Php.
Alternatively from the CSS solution you could also look into this jQuery solution if the client doesn't mind the ellipsis.
http://dotdotdot.frebsite.nl/
The benefit with this is your full text is still on the page for indexing and ranking purposes.
I came across to a weird problem that I am having a problem with. I have texts that I obtain from database with no character limit. What I am trying to achieve is that number of rows if that text put into a div width css property;width:600px
Sounds weird but I need to manage this server side because I am going to arrange my style before they are printed on the page, so if the number of rows calculated on server side is less than 10 I will arrange something in a way, if it is more than 10 I will do another way. Any possible way to obtain this?
Check imagettfbbox() function. It calculates the width of string in pixel. First remove new lines from your text and than calcuate the whole text length, than divine into 600px. You will obtain the row count.
But this is not suggested way. Better try to use css or javascript for this
Don't do this server side. There are enumerable client side settings and options that will affect this and a server side solution will never work properly in all cases. With JavaScript, it would be trivial to calculate the number of lines based on the rendered height divided by the line-height.
var lines = $('#somediv').height() / $('#somediv').css('line-height');
Does anyone know a clever way to create even columns of text using php?
So lets say I have a few paragraphs of text and I want to split this into two columns of even length (not string length, I'm talking even visible length).
At the moment I'm splitting based on word count, which (as you can imagine) isn't working too well. For instance, on one page I have a list (ul li style) which is increasing the line breaks but not the word count. eg: whats happening is that the left column (with the list in it) is visibly longer than the right column (and if there was a list in the right hand column then it would be the same the other way round).
So does anyone have a clever way to split text? For instance using my knowledge of objective c there is a "size that fits" function. I know how wide the columns are going to be, so is there any way to take that, and the string, and work out how high its going to be? Then cut it in half? Or similar?
Thanks
ps: no css3 nonsense please, we're targeting browsers as far back as ie6 (shudder). :)
I know you're looking at a PHP solution but since the number of lines will depend on how it's rendered in the browser, you'll need to use some javascript.
You basically need to know the dimensions of the container the text is in and using the height divided by the text's line-height, you'll get the number of lines.
Here's a fiddle using jQuery: http://jsfiddle.net/bh8ZR/
There is not a lot of information here as to the source data. However, if you know that you have 20 lines of data, and want to split it, why not simply use an array of the display lines, then divide by two. Then you can take the first half of the PHP array and push it into the second column when you hit the limit of the first.
I think you're going to have trouble displaying these columns in a web browser and having a consistent look and feel because you're trying to apply simple programming logic to a visual layout. CSS and jQuery were designed to help layout issues. jQuery does have IE6 compatibility.
I really don't think you're going to find a magic bullet here if you have HTML formatting inside the data you're trying to display. The browser is going to render this based on a lot of variables. Page width, font size, etc. This is exactly why CSS and other layout styles are there, to handle this sort of formatting.
Is there any reason why you're not trying to solve this in the browser instead of PHP? IE6 to me is not a strong enough case not to do this where it belongs.
I am building an ebook app, and for that I have a big chunk of text (the book) and I have to divide it into N number of divs with a special class. I manage to achieve somehow a result by counting the words and after N words create another div, but words count is not a really good parameter.
Is there any way I can fill a div (320 x 480) with text and when its full create another one? In the end what I need is the full list of divs one after another.
Any hint on what should I look for is much appreciated!
Thanks
No, because you can't work out programatically how big that text is going to be when it is ultimately rendered for display.
Why not let the device itself work out how much text it can display on a page?
I don't have time to work out the specifics, but something (admittedly hacky) you could do is add a certain amount of text to the div and then check how its scrollHeight compares to its offsetHeight. This is probably going to be really slow, and you'd have to have some way of comparing it before you actually add the text: scrollHeight is always equal to offsetHeight, until the text actually overflows, and that's exactly what you're trying to avoid. Maybe some kind of temporary div? I don't know. I'll leave the specifics to you to work out. ...Or ignore completely. Whatever.
Setup
I have a website that draws RSS feeds and displays them on the page. Currently, I use percentages on the divs that contain each feed, so that multiples can appear next to each other.
However, I only have two next to each other, and if the window resizes, there can be some ugly empty space on the screen.
Desire
What I'd like to be able to do, but have not figured out a way yet, is to put all the feeds linearly into the page, and have:
a 'pre-built' multicolumn view where the feeds would "balance" themselves into the columns
which leads me to:
the number of columns change depending on how wide the screen is currently\
This is akin to how word processing applications handle columnar layouts.
Question
I presume that I will need to implement some form of AJAXy happiness, but currently know very little about Javascript.
Is there a way to do this with just CSS/HTML/PHP?
If not, how should I go about solving this?
final solution:
(based on #warpr's and #joh6nn's answers)
#rss
{min-width: 10em;
max-width: 25em;
min-height: 15em;
max-height: 25em;
font-size: .97em;
float: left;
}
You probably cannot get what you want with just CSS/HTML, but you can get somewhat close.
A trick I used for a photo album is this:
Make sure each feed has a fixed width, I would recommend something like '20em';
Make sure each feed has the same height.
Float everything left.
Because each div has the same dimensions, when they're floated left they will form a grid with exactly the number of columns that will fit in your browser.
Unless you actually fix the height of the divs and use CSS to clip the content, you will need javascript for step 2, what I did was:
Iterate over each feed div, finding the tallest div.
Iterate over each div again, changing the height to match the div found in the first step.
This is fairly easy to implement, but is obviously not optimal. I look forward to reading any better solutions posted here :)
you might be able to do this with lists; i've never tried it, so i'm not sure.
if you make list items display:inline, the list becomes horizontal instead of vertical. from there, if you stuff the list into a containing element and fiddle with the padding and margins, you may be able to get the list to line-warp, like text: again, i've never tried that, so i don't know.
if this technique works, i'd be very interested to hear about it.
The only way I can think of is a mixture of dynamic CSS and javascript. Every time a column (feed) is added, use the javascript to rewrite the width (in percentage) of each div.
jQuery would come in handy here.
var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");
Someone feel free to correct me if I'm wrong. My jQuery is a little wobbly.
Of course, if you're not using AJAX, you could implement the same solution entirely in PHP.
You could also use this jQuery javascript (you will need the jQuery library).
var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
$(this).width(colWidth);
});
Which would set the column width dynamically.
For this to work your columns should have the class 'feed'
EDIT:
You should style your divs something like this:
.feed{
float:left;
}