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
Mon
12
Dec 2016
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
Wed
05
Dec 2012
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.
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
Comments | #webdev #css #html Share
# Hakaton - HTML5 Programming Event
Sat
16
Apr 2011
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 :)
The theme was "Creative Science", but as always in such contests, participants just coded different stuff. Our entry is a simulation game where creatures of different species (red, green and blue) move around and do different things. Red creatures are predators - they have to eat blue ones or else they die from starvation. Blue ones try to avoid reds, eat green plants and form couples to generate offspring. Finally, green creatures do not move - they are plants, they just grow by generating new elements. Interesting situations can emerge from such simple rules. For example, sometimes only plants remain and grow infinitely, but sometimes blue creatures consume all plants and breed to a large number. We even managed to make it interactive - you can put new creatures on the map with mouse clicks. The game is coded in HTML5 and JavaScript using <canvas>. It requires a modern web browser with support for these technologies. You can play our game online here:
What I also liked was extensive use of Twitter during the party. #hakaton was second most popular hashtag in Poland today! Some screenshots:
