I would like to know if it is possible to have line-breaking text that sometimes consists of one line and sometimes of two. I can best describe what i mean it with an image:
You would have to insert the text into separate elements which have the shape and size you want to achieve the effect you are going for. It is not possible with just one html tag.
As Watson said, you'll have to contain the elements in containers of a specific shape and size. You can't make them truly "fluid" as I think you're meaning to comment, however, you can use percentages for those containers to determine how much text is visible in space and possibly viewport sized text to try and properly fill those spaces. Definitely no manner in my mind that will allow you to easily create this in a universal method for all browsers. You're going to have a lot of ragged edges I'd suspect.
Related
I'm building media library web app and I want media items listed in a side bar to be fully displayed.
Excel has this neat feature where cells containing strings long enough to overflow automatically adjust the font size to exactly what is needed for the string to remain contained within its padded borders.
I'd like to recreate this with css.
I don't think there is possible to do so. You can, however, create mediaQueries and give different heights or line-heights.
You could use word-wrap: break-word in a div, to make sure the text reorganizes so It won't come out the div's width. However, It would remain with the same size. So, I would definitely use mediaqueries for that
This can't be achieved through CSS alone. Javascript could help you, but it won't be easy.
Try this post: JavaScript Scale Text to Fit in Fixed Div
I'm current trying out the different methods to structure web elements and text, you know baseline grids, modular scale or both combined to see what is the best. I'm currently trying out modular scale just now.
I was wondering how I would go about calculating line-height for header tags using the following scale?
http://www.modularscale.com/?16,80&px&1.618&web&table
I know the very basic idea is to pick a number from the first column as the text size and a number for the middle column for the line-height.
let's say we use 67.773px for an H1 tag, what line-height would I give that? Using 4.236em from the middle column as its line-height doesn't look great at all.
I'm probably missing something really obvious here...
Thanks.
Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.
Here's some examples of fonts designed to be used this way.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
I was sort of able to get this to work using CSS like this:
http://jsfiddle.net/6SakC/2/
This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.
However, this doesn't seem ideal to me. Two problems:
I don't want to duplicate the text in the html.
I have to guesstimate the top-margin by trial and error.
If the text wraps, this doesn't work anymore.
Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.
Thanks!
You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/
That also solves the problem with the text wrapping.
To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)
Are there any existing plugins/extensions/methods to maintain vertical rhythm for Twitter's Bootstrap project?
It is quite a laborious task to create good vertical rhythm templates, I would rather use a pre-baked solution. I am open to creative suggestions, I just want my pages nicely aligned in the end.
Edit: To clarify what I am after...
Vertical rhythm is a technique used to ensure that every element on a page lines up according to a horizontal grid. This is achieved by setting the height, padding and margin of every item to conform to a standard unit line size. If a line of text in a paragraph is 20px high (including margin and padding) then maybe a heading 4 will also be 20px high, and a heading 1 might be 40px high. This maintains the rhythm of the text across columns.
I want to use this technique in combination with bootstrap (from twitter), but it would be quite a lot of work to get everything looking nice. For example, all the buttons would need to conform to the same vertical height definition as paragraph text etc... There are other standard controls used in bootstrap which would also all need rules to define their height appropriately.
I could start with a generic solution for vertical rhythm, which would go a long way to achieving what I want, but I wanted to know if anyone else has started this, or has any idea of another way to achieve this.
Edit: Assuming there is nothing like what I want...
Maybe just a good vertical-rhythm based css template would be a good starting point. Preferably something that is continuing to be developed, is already usable, well thought out, and adaptable.
Since no one has linked to an actual vertical rhythm boilerplate as you suggested, I took the one I use, commented it, and created a github repo for it here https://github.com/jonschlinkert/vertical-rhythm
As it says in the readme, this is a starting point for your own project.
I think what you're going after is understood. Problem is: you're looking for a grid schema in one dimension (a "vertical rhythm" set in accordance with, for example, proportional line heights...which, in a manner of speaking, measures and aligns things along a given page's Y axis)...but doing things in that manner might potentially be at odds with Bootstrap's pre-existing 12-column grid system (which, in contrast, measures and aligns things along the page's X axis). You want to "proportionalize" the height of each "row" in the framework. BUT: keep in mind, Bootstrap's design is intended to promote not just proportionality via columns solely for the sake of looking nice, but to also make pages responsive--i.e., to allow page elements to "flow" around one another vertically, and to nest fluidly. And, in that sense, issues pertaining to the height of elements measured along the Y axis may already be accounted for... I recall that most of the typographic elements in the base CSS file have proportional em sizes, and/or likewise proportional top and bottom padding, etc. Generally speaking, things are not so arbitrary that the framework screams a need for additional styling in the manner you're considering.
Even so: Bootstrap's base CSS file isn't so intolerably extensive that it'd be impossible for you to tweak the height of various element classes and IDs yourself without too much trouble. In any case, it's highly unlikely you're really going to need to do that with every styled element, right? In fact, as a framework, Bootstrap includes styling for many elements which may not even be in the app for which you're designing the front end. (EXAMPLE: Does your app have drop down menus? Great. You can style the "vertical rhythm" of drop down menus. BUT: are you also using pills or tabs in your nav bar? No pills, you say? Well, you can just delete a couple hundred lines of code in the stylesheet and save yourself the effort of having to apply your "vertical rhythm" to those unneeded elements.) Elsewise, for the elements that remain and that you do in fact need, just use a text editor to find-replace the values for line height, top and bottom padding, margins, font-size, etc...and test it out. As a CSS framework, it's pretty clear how Bootstrap is laid out; relevant elements are well sorted, and grouped together within the stylesheet's code for the most part. Once you do complete tweaking of the base CSS file, just minify your revised stylesheet...to replace the pre-existing minified version...or, perhaps, just serve it up from CloudFront if you want to optimize.
The Compass CSS Authoring Framework has explicit support for vertical rhythm based typography. For starters you can check out this short video tutorial.
Have you looked at the Square Grid CSS framework?
http://thesquaregrid.com/
A simple CSS framework for designers and developers, based on 35
equal-width columns. It aims to cut down on development time and help
you create beautiful-structured websites.
Square Grid provides a standard horizontal grid, but it also maintains a vertical grid, using a standard "square" of 28px. It is really just a grid, not a full CSS library like Bootstrap (i.e. no buttons, menus, etc).
I used to for one project and found it to be pretty intuitive, though I ultimately decided that it was too hard for me to keep track of both the vertical and horizontal grid, especially when thinking about responsive design.
You may be able to combine the two, or at least take a look at the square grid source code which is pretty simple CSS to get some ideas on how to adapt Bootstrap to meet your needs.
Can we make cross browser css layouts with CSS positioning, without using float? What are the bad and good points of usin css positioning over Float+margin+padding? I want to make layout compatible with all A-Grade Browser and with IE6 Also? IN dreamweaver we have a layer functionaliy to make css layout quickly but it's uses absolution position. is this technique bad?
If you don't care how it looks if the browser is larger or smaller than you designed for then absolute positioning it great. :)
But, in most cases, if you are designing for a browser that may be on a 17" - 30" monitors, so it may be fullscreen, then float is helpful.
Now, if you are changing the positions to scale to the size of the window dynamically, and can handle a resize, then absolute will work well.
I think absolute positioning would be more work than it is worth, if you want to get rid of float.
When I put together a page, I consider the elements I am putting together and the kind of physical structure they form. If elements are lined up together, like a row of books, I will use floats to "press" them up against one another. If I have more sparse elements, like post-it notes on a sheet of paper, I will use absolute positioning because the position of one element is not closely tied to the position of another.
I also look at what I know about the elements and what I don't. If I have things that change in size, like elements with varying amounts of content in them, I will use floats to position them. This way the elements still "stack" up together in some orderly fashion. Positioning an element of arbitrary size can be tricky, since you can end up exceeding a container's boundaries and breaking a layout or displaying/hiding some content in a place you don't want it.
Of course, you can combine the two techniques together, too - it's all about what you need to put together.
Can we make cross browser css layouts with CSS positioning, without using float?
Certainly, if you like. Floats and positioning are just two more CSS properties, they are not mutually exclusive. For complex layouts you may often be mixing both.
IN dreamweaver we have a layer functionaliy to make css layout quickly but it's uses absolution position. is this technique bad?
Yes. Except for things that are naturally fixed-size like images, using exact page-pixel absolute positioning is a bad move, one that automated tools tend to produce because it's easy to do with a WYSIWYG interface but one which degrades badly for text.