neko // they/she // 19

🌻 cute oneshot creator for omori

🌻 abuse, p*dophilla, and other touchy subjects aren’t allowed on this blog

🌻 asks: open (feel free to send one!)

current amount: 0

🌻 spoiler warns put on lore based asks

🌻 anons will be listed below here :)

nothing to see here...

🌻 tags to navigate the blog

#photo-memories : asks/writing

#basils-garden : me interacting with anons or rambling (potential spoiler warning)

#white-space : lore based asks (spoilers here)

Reading the original comment, rutherford is looking for a cross-browser way to wrap unbroken text (inferred by his use of word-wrap for IE, designed to break unbroken strings).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */ .wordwrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ }

Using inline-block instead of floats on elements is – IMHO – a better layout choice but it requires some tricks to remove the white space between element.

Chris Coyier has collected a very comprehensive list of techniques to fight the space between inline block elements; if you want to know why this space is rendered and how remove it I suggest to read his post.

The font-size: 0; and font-size Reset Technique

My favourite technique consists in setting the font-size: 0; property on the parent and then resetting the base font size on child elements. I prefer this one above others because is less empyric than use an arbitrary negative spacing between words or letters and because involves a single property instead of two or more.

Unfortunately also this technique has a drawback; in Safari for Windows the white space does not collapse.

As said by Philip Walton in his comment this bug makes the technique unusable. But now I found a solution, or, rather, I discovered that the fix to solve the font rendering issue in Chrome solves also this problem.

The SVG Solution

Font Spring published a fix to improve the rendering of webfonts in Chrome. I used this technique in a demo and a friend asked me why in my implementation the spaces were gone even in Safari.

Looking for an explanation in the only way it ever worked – dismantling the CSS one rule at a time – I notice that serving the SVG version of the webfont before the Woff one also fixes this problem.

To better test the technique here is a demo.

The first row of "things" have a regular, standard, @font-face rule applied to the parent element; look at that page with Safari for Windows to see that the space between element is still here.

Then take a look at the second row of elements. I've applied to this element a modified @font-face rule as explained in Font Spring post, serving SVG before Woff. If you look at that page with Safari for Windows you can notice that the spaces were correctly collapsed.

[quote] Now, the trade-offs

As explained in the Font Spring post there are three trade-offs. Honestly I think that the first two are acceptable and the third is not a Safari issue and then we will think about it when Chrome will improve the font rendering.

And what if I'm wrong?

* Updated with the Flexbox version.

During my work as a frontend developer I coded many sites with a full page layout, both before and after the Flash decline.

Coding this type of layout was, every time, one step forward towards a better and more maintainable CSS structure; however, even if every single length was expressed as a relative and flexible unit, we need to know the number of pages.

For example: if we have an horizontal structure of 6 pages we set the pages’ container width to 600% and every single child page width to 16.66%. But if the number of pages changed to 5 or 7 we have to edit the CSS.

Even if we built the section wider than needed, for example setting the container to 1000% and the single pages to 10%, we can’t be sure that the number of pages never changed to a higher value.

With this problem in mind I’ve searched a solution to compose a full-page grid layout that doesn’t need to know how many pages compose the site; so if I need to add or remove pages at runtime the structure adapts itself to contain the new content.

The result is my new Unlimited Grid Layout Boilerplate; a brand new application of simple basic CSS rules that allow developers to build flexible full-page sites with the flexibility to add or remove pages, or even entire sections, without breaking the layout. The current version, the 1.0a, uses two simple declarations to achieve the task.

white-space: nowrap; on the container of the horizontal structure, and display: inline-block; on the inner pages.

These two declarations prevent child pages to wrap. Now we have an horizontal flow which generates a native scrolling and that can continue to infinite. If we don’t need the scrollbars we can simply remove them with an overflow: hidden; declaration and control the panning with javascript.

Considering that a demo is worth more than 1000 words let’s see two implementations of this boilerplate: but before, let me say just two words (so eventually the words will be 1002) about this proper demo.

The demo runs slow on webkit browsers because of an issue with background-size property; try the demo on Firefox or (strange but true) in Internet Explorer to have the best experience; anyway, the background-size declaration is just for eye candy and the layout complexity may vary in the real world.

In Internet Explorer the control panel in the upper right corner does not work because the lack of support of querySelector API; so if you look at the demo in IE you can see only a 3x3 grid. Sorry about this but it’s a demo and I didn’t want include any external library like jQuery.

The demo uses text-shadow and multiple backgrounds properties only for presentation purpose, so I’ve build the demo on graceful degradation concepts: in IE you can’t see any shadow on text and in IE 8 or less you can’t even see any background image or background colour but you can still explore the functionality of the boilerplate with the base grid; even in IE 7.

The CSS is fully commented so you can take a look directly at the code to discover the tricks. The CSS is separated in tree parts; only the first part, the structure, is really important for our scopes; the second part, the eye candy, is for the beauty side of the demo; and the last one, the demo logic, it’s only to dress the control panel and the credits.

This boilerplate works well in Safari Mobile and Chrome Mobile (tested on iPhone and iPad with iOS6) but in the (current) demo you will not see the numbers in background like in the desktop browsers because the background-attachment: fixed; doesn't works as expected. If you test the boilerplate on other mobile browsers or devices, please, let me know the results.

Ok, now it’s demo time! Let’s see two implementations, one ordering pages in columns and one ordering pages in rows.

Unlimited Grid Layout Demo — Ordered by Columns

Unlimited Grid Layout Demo — Ordered by Rows

Do you like it? I hope you do. Feel free to experiment with the code and use it in production if you feel comfortable with it. If anyone makes a website or a webapp based on this boilerplate, please, let me know; I will appreciate.

Just one thing. The “a” in the version number (1.0a) means that there will be also a “b” version that achieve the same result using not the inline-block display property but the, less supported at now, flexible box layout model. This second demo will not be more complex than that one, but the changes in the flexbox and the lack of a solid support from browsers mades me delay this version.