I would just like a div, in the center of the page, that contains one line (two words) of h1 text, and that text is justified to the length of the div; meaning, the letters space out (while maintaining their size) to occupy the entire width of the div, and do not go outside the div. And, if I change the browser settings to shorten the width of the page (such as zoom in), the letters will condense (to a point, before breaking up to two lines).
I cannot realistically list all the things I have tried, to no avail. Which includes all the suggestions I have seen on this site to date.
Is it really that complicated? Or am I just missing something obvious?
Please, please help.
I apologize for the "subjective nature" of this request.
So you want the font size to change depending on window width?
In CSS, you can use the vw unit for font-size, so that would respond to the window width, but requires some trial-and-error, I guess.
Apart from that, there's a javascript plugin named fittext (http://fittextjs.com/) which does what you want. I used it on one website and it works quite reliably,
Related
So I am building a quick small website. In the website, when the user is logging in, the website asks for the name. In my database, I have allocated a VARCHAR(255) for the username and restrict the first name to 50 characters when the user is logging in. However, I have no clue how to make sure that the any of the names being displayed on the website don't overflow their designated container. I don't want to use word-wrap: break-word and overflow: auto because I don't want to break up the name or hide part of it. I just want to make sure it fits in its container. How can I make sure that it fits? Thanks in advance.
Yang
Well, if you do not want to break up the name or hide parts of under any circumstances you have three alternative paths to consider, as far as I can see:
Size the designated container element so that it can fit the widest possible 50 character strings. You can get good benchmark for example by creating <span> element with identical font family size containing 50 W characters that should be in most fonts among the widest letter characters. Then inspect the the element in browser inspector to get the maximum width. Maybe finally round up that width in your CSS for the container to be on the safe side and take into account any possible paddings etc. that reduce the inner width.
Make the designated container element width increase dynamically when needed with CSS or Javascript.
Make font size in the designated container element decrease dynamically when needed with Javascript.
I'm trying to get more efficient with building responsive websites and since I'm using Bootstrap (not particularly important for this case - I believe), I was looking into Bootsnipp. I decided to view the site's source and noticed one thing I've never seen before: they did not set a height for any of their containers except for the whole page wrapper and the footer. This baffles me because everything falls into place with the website and it's super repsonsive. I understand the elements where they use Bootstrap's classes like "col-sm-4" and whatnot but does anyone understand the art of making the header, a content container, etc calculate heights without specifying in css? Can anyone explain this concept? I tried Googling but not sure of the correct keywords to find answers.
Also, if you need to see yourself, here is the link to their CSS.
Thanks
Understanding the Box Model is important. As an (overly simplified) rule of thumb, you can think of it like this; there are 2 primary types of elements: inline (span, b, strong, ...) and block (div, p, ...).
Block tags by default are width: 100%. That is to say they will naturally stretch to fill their horizontal area.
Inline tags you can think of as being constricting. They shrik to fit the size of their inner elements. This makes sense when you think of a bold tag: it is not unlike highlighting the text you want to be bold. It stays small to fit the content.
In both cases, though, unless you specify a height, both block and inline tags will shrink their height to fit their inner elements. Because of this, you can think of a website as being a bunch of elements stacked on top of each other, where the top of the page is the bottom of the "stack".
Here is an example of divs without specified heights having their heights changed by the size of the interior content. http://jsfiddle.net/S3q2C/ Notice all the divs have a border to easily see its relative size.
If you don't set an explicit height, containers will automatically grow to fit the content (respectively). Sometimes this is desirable, other times not (think overflow hidden). A possible reason why people use explicit heights in containers could be because of absolute positioning, or if they want to align a nested element that is 50px tall, with another that is 200px tall. An explicit height could also be used to maintain perspective say for a picture or other element (maybe a series of elements). While this answer is the end all be all you might be looking for, the key thing I'm trying to pass along is that an explicit height is used when needed, not all the time.
Here's a quick demo showing you two <div> containers, one with a height set, and another with no height.
http://jsfiddle.net/xrZ73/1/
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
How I can align a text/pargaph both to left and right in HTML? Like in the office programs.
text-align: justify; in css
but beware: unlike in proffesional DTP applications or even in word, HTML/browser often do not play nicely with this - you might end having humongous gaps in your text, completely destroying any typogtaphy you try to achieve in your document.
Edit:
As reply to Brian, my experiences are following:
haven't tried % for width, because I either set width in px or not at all and let display:block; element fill whole width of parent
text-align: justify works best with small font-size with slightly higher line-height - line-height is for readbility and smaller font size puts more characters in one line (abstract characters-per-line width), therefore gaps between words/justified text looks better
regarding images instead of small non changing parts of text - I tend to use as few image replacement parts as possible - I have very good results with Cufón, if you learn to count with it's cons
I don't advice using justified text for sidebars and one-liners - it mostly seems ugly
Edit2:
The main problem is, that browsers don't know how to part your text (i.e. unbreakable to un-breakable) - soft hyphyen, should solve this (link: soft hyphen overview), but browser support is wild at best :)
If the name is like "david" it comes within the allotted space....
but if the name is like "john pal abraham desouza" the allotted space increases automatically..
So i need to have the name occupied in the allotted space by auto resizing the font..
Suggest me a solution..
You can use jQuery to check the length of the string and guess at a suitable font-size, check the rendered width and then adjust again if necessary.
As #Kieran says above, it's not going to be fool-proof - if a name is very long the font-size will be really small. Also, if there are no spaces in a long name, then the text won't wrap over two lines. However, that's a bit of an edge case.
Use a hidden dummy div to do the checking
By using a hidden (using visibility: hidden) and absolutely positioned div with same font CSS settings and copied content, you can easily change font sizes and check div width. When it exceeds certain size you can use the last valid value on your original div. This will avoid visual change of your fonts and content repositioning and recalculation so it will work faster. This will also avoid problems with long non-spaced words.
The same question has already been asked and answered.