http://asawicki.info/ Programming, graphics, games, media, C++, Windows, Internet and more...
Entries for tag "html", ordered from most recent. Entry count: 3.
Nonbreaking Space and No-Width Optional Break
Wrapping text on word boundaries instead of single character boundaries is a great invention. A text looks so much better when inserted to Word:
Than when printed in oldschool console:
But there are places where we may not want a line break to be possible despite we insert a space. For example, in Europe we use space as thousand separator (and comma as decimal mark) when writing down numbers.
A special character called "nonbreaking space" is very helpful in such cases. You can insert it in Word by clicking: Insert > Symbol > More Symbols > Special Characters > Nonbreaking space. This character looks like space, but it doesn't cause line break.
You can actually see this "invisible" character when you press Ctrl+*. It looks like a small circle or a degree sign.
In HTML you can specify a non-breaking space as:
I have discovered quite recently that there is also an opposite special character, called "no-width optional break" or "zero-width space". It is useful in cases where you have a long sequence of characters (like a file path) and you want it to be broken across lines despite it doesn't contain any spaces. It is especially important when you use text justification, because such a long text moved to separate line as a whole can cause an ugly effect:
You can insert this special character in Word (e.g. after every backspace in the path) by clicking: Insert > Symbols > More Symbols > Special Characters > No-width optional break. It occupies no space, but it tells the word processor that a line can be broken at this point. Now it looks much better:
When you press Ctrl+*, you can see this special character depicted as a rectangle.
In HTML you can also use it by typing:
​. It's Unicode "Zero Width Space" character.
Nearest-Neighbor Filtering in HTML
In 3D graphics programming, when a texture is enlarged, sampler performs filtering to interpolate between texture pixels. That's also what happens by default when an image is resized on HTML page - browser does some interpolation (e.g. bilinear or bicubic), which makes the image blurry.
What if you have a small pixel-art image and you want to show it on a web page as pixelated, not blurred? It turns out there are nonstandard CSS attributes for this. I found these two - first one is for Internet Explorer and the second one works in Firefox.
Hakaton - HTML5 Programming Event
Today I was on Hakaton - a full day event organized by Google at Warsaw University of Technology. It was actually a contest in HTML5 programming. I had no previous experience in HTML5, but as a team with two other participants we scored 2nd place out of 17, won nice backpacks and books on web design :)
What I also liked was extensive use of Twitter during the party. #hakaton was second most popular hashtag in Poland today! Some screenshots: