Showing posts with label netiquette. Show all posts
Showing posts with label netiquette. Show all posts

Saturday, December 15, 2018

Primer: How to avoid a wall of text in comments, and in life

This was meant to be a reply to someone who submitted a wall of text in a comment in YouTube. I'd decided against posting that reply, because the person used a nickname instead of a real name and photo, and that person's comments showed early signs of aggressive behavior (calling a person who complained about lack of punctuation and grammar a "budddy"), if he felt, that my reply would escalate the debate.

Your comment text anywhere — including in social media — would be much easier to read and quite a bit more useful, if you were to use punctuation, paragraph breaks, and correct spelling. Then people will take all the written comments and the comment writer more seriously. And not just comments, but really most everything you write.

Instead of offering a long search link that tells more about you than you'd volunteer, it would be more convenient to either submit a truncated search link, like this:

https://www.google.com/search?q=q6600+for+sale

or say, that: 'if people would search for

q6600 for sale

— they'd find results starting at the ballpark of U.S. $7.95 to $10.88.'

Currently, your search link tells everyone in plaintext [the commenter posted a very long search results URL], that you have an HTC phone with Android, and it could be inferred from "android-home", that you might have possibly made a voice-based search (via speech-to-text). It could then be further deduced, that your entire comment was dictated through your phone.

It may be tedious, but you will reveal less information about yourself, when you copy the search result, and shorten it in your browser's address bar, leaving only the /search?q=searchable+thing part after the domain.

Tuesday, May 10, 2011

Collapsing elements in Firefox 1.0

As I was perusing Yahoo Mail Classic in Mozilla Firefox 1.0, it turned out that there was a linked block element half-blocking the sign-out link at the top of the page and in May this year, those links stopped being underlined when hovered over — this made targeting the pointer too difficult to click on the sign-out link. If I click on that block element, it will jump to a position on the page, then, somehow the block element probably moves and probably frees up the space above the sign-out link... Or whatever.

Turned out that the culprit was an invisible non-collapsed block that contained a "Skip to conent" link, which was meant for browsers like Lynx, Links, Elinks, Netscape 4.x, and other older fare (Lynx is still maintained :). This is really the fault of site coders, who instead of specifying display:none in the element's style, only specified visibility:none. The former would have collapsed the whole element, the latter only makes it invisible, but still usable and visually existent in the document structure.

If positioning is important, then one design solution is to specify a low z-index for the invisible DIV element and a correspondingly higher z-index for code that contains links (an unordered list). In CSS, z-index specifies how elements are layered with respect to each other: a higher value means that an element is above (or in front of) all other elements and a lower value (if somewhere is a higher value specified) means that the element is below, or behind higher-valued elements.

First I tried the Adblock Plus (ABP) extension, but that didn't work: ABP 0.7.0.2 is the last version for Firefox 1.0, but lacks functionality to collapse/hide elements by their id. Only the next version, 0.7.1, starts supporting this. I've written about it previously.

As I was looking for a solution, the Greasemonkey extension caught my fancy. The last to support Firefox 1.0 is 0.5.3.
Version 0.5.3 is also the last one of Greasemonkey to install on SeaMonkey 1.1, but it doesn't work.

The solution is to first install xSidebar (If the current stable versions won't want to install, then version 1.0.1 or 1.0.2 might install properly). Then on the back of xSidebar a modified Greasemonkey extension can be installed. So for SeaMonkey 1.1, Greasemonkey 0.8.2 mod is the order of the day. Note that if you have Adblock Plus 1.0.2 installed, its toolbar button will vanish. But no worries: You can turn on the Adblock Plus status bar icon from Tools > Adblock Plus Preferences...
Greasemonkey is a powerful tool to change the look and functionality of online sites and web pages client-side, but alas, it is not very easy and requires knowledge of HTML, JavaScript and CSS.

There are many instructions online on how to incorporate custom JavaScript and CSS snippets into your browser equippped with Greasemonkey and how to specify server whitelists and blacklists. I might introduce the same instructions here or put them up somewhere else.

While I thought I just had the solution, it then turned out that the block element was only equipped with a class parameter and no ID. I had also learned that only recent and modern versions of Greasemonkey now support the JavaScript getElementbyClass functionality, but I only have an outdated version.

Well, no matter: Greasemonkey 0.5.3 supports getElementbyId, but that really is not the most important thing, because Greasemonkey also allows injecting snippets of Cascading Style Sheets with JavaScript. And CSS is power.

Yes, while the DIV element did not have the ID parameter in it, it still had the CLASS parameter specified and the solution looks like this:
document.styleSheets[0].insertRule('A[class~=yucs-skipto-search] {display:none}', 0);
/* ^A is the linked element;
• Square brackets in the selector are used for conditional matching in the form of ELEMENT[attribute=value] — In this case, the {display:none} CSS block applies when yucs-skipto-search is found anywhere in an A tag's class attribute value (which the next point is about);
~= means that the pattern for the element attribute may be any matching part inside class, because when I looked at the source, the class parameter contained more than just yucs-skipto-search.
display:none collapses the element. */

document.styleSheets[0].insertRule('A[target=_top]:hover {text-decoration:underline !important;}', 0);
/* ^ In this line, Any hovered link tag A where the target parameter exactly contains _top must be underlined when hovered over. Note that instead of ~= for any matching part inside A[TARGET ]there is a single equals sign = for an exact match. !important overrides anything provided previously and makes sure that the these links are underlined when hovered over. */
So much for now.

Thursday, May 5, 2011

Adding formatting to CSS generated content

This solution (or workaround, if you like) came out of a need to write text visible only for modern browsers.

I have a case, where such text would point out a formatting feature containing further information in <ACRONYM> tags, only that severely out-of-date and text-only browsers do not support the dotted underline and border properties, so help text for these browsers was not necessary. I wouldn't use JavaScript (which uses document.write) and there are websites like WordPress (IINM) that only allow editing CSS files and may forbid JavaScript.

The CSS 2.1 specification has it that it's possible to create generated content before or after an element, using :before and :after pseudo-elements, respectively.

The best explanation about how it works is in the CSS2 technical recommendation at W3.

The difficult part is in how to format text within the content: property.

Well, there are two ways that work and a third way that is a workaround. The two ways are well-documented in the W3 technical recommendation (see above link), where it's possible to specify attributes with first-letter and first-line (for longer texts within content) pseudo-elements.

The Third Way

Specifying formatting for bits of text within the content: property is impossible, so the solution is to create one or more rulesets of :before or :after pseudo-elements with similar declaration blocks, wherein some rulesets' declarations are different.

In HTML, write the following snippets of code:
<SPAN CLASS=text></SPAN><SPAN CLASS=dotted></SPAN><SPAN CLASS=bits></SPAN> and so on...
In CSS, example code shows the following:
.text:after {content:'^ Mouse over text with\ ';}
.dotted:after {content:'dotted underlines'; border-bottom:dotted 1px; border-bottom-color:inherit;}
.bits:after {content:'\ for more infobits'}

/* ^ Use the backslash \ to escape special characters, including a space (or it won't be shown). */
The result:
Browsers, which don't support CSS :before and :after pseudo-elements, won't see this. ^

The result is used here in a previous blog post. The example text snipped was put in place of a paragraph break, but since the Lynx browser wouldn't create a paragraph break inside a list with <P></P> or <BR><BR>, or instead there was more space added in modern browsers with variants that included a non-breaking space &nbsp;, then the best solution was to wrap above HTML code within <DIV> tags and add a non-breaking space —
<DIV>&nbsp;<SPAN CLASS=text></SPAN></DIV>
Characteristics
The most interesting and equally obscure characteristic with CSS generated content is, that generated text cannot be directly copied — even when selecting a normal area that wraps around generated content, then only the wraparound selection is pasted.

While this may be useful to wonks interested about protecting original content, then it's still a chore to implement, and advanced users would still be adept at copying text from near the source (unless obfuscated). The technique is similar to mechanisms that disable direct text copying in advanced document files, like PDF, but with the difference in sophistication: PDF files have encryption and other features.

The (dubious) advantage is, that direct copying is disabled; and the disadvantage is, that a number of browsers don't support these pseudo-classes. And not just older (Netscape 4) and niche browsers (Lynx, Links, Elinks), but even Internet Explorer 7 doesn't.

16.12.2015. Update:

I recently wanted to add newlines to generated content, but after several turns of trial-and-error with \A in content:, I turned to a search engine and found about the best blog post by Chee Aun that describes the issue in detail.

The solution with Firefox is to specify white-space:pre-wrap — This preserves both wrapping and newlines.

Thursday, April 7, 2011

Free Software alternatives to Trajan Pro

With the image and font table well below I have tried to find out free small caps and fallback font alternatives to Trajan Pro, a very popular Roman-style font known for its style and legibility. With free, I have in mind the context of free software, so free as in freedom.

The reason for this was that I was fixing the design of a simple website and its original designer had specified Trajan Pro as the font for the site's menu text, only that Trajan Pro is proprietary and non-free, which means that not everyone has it and I had to find out the necessary fallback fonts.
A fallback font means that I specify multiple fonts in the font-family CSS property: If a web browser can't find the first font, it shows text in the next specified font or uses the browser default.

I recently discovered that a similar trick can be used in OpenOffice.org documents, where I'd specify two or more fonts and separate them with a comma. OO.o also has the means to set fallback and replacement fonts in its options.

Requirements for matching fonts:

• Roman typeface.
• Must have small caps, just as Trajan Pro does /capital letters should then be bigger;
• Must look good and legible in bold weight (this was the site requirement) at default size (12pt/16px) and I only chose ones that looked good enough;
• Must contain the ü character /implies that other Latin-extended characters are also contained.
N., 06.09.2012 update:

A large number of primary fonts are already 'Roman' or like by their looks, and nowadays' CSS conventions should allow transforming text into uppercase with a favoured font. Alas, there are sites that are likely to use Trajan Pro, and so there need to be fallback fonts that are similar.

Process:

I found most of the interesting fonts from fonts.debian.net (one large page contains several hundred images of font examples, so beware), an otherwise fabulous resource for all who want to seek free software fonts.

As I was seeking only small caps fonts, I only downloaded these.
In the process it occurred that that some of those fonts wouldn't show properly, because space marks were visible. Since fonts.debian.net shows fonts with all their subsets, I made a half-educated guess that some of the small caps fonts I downloaded were also subsets, which therefore didn't require to have spacemarks in them, because any rendering software would fall back to the main/primary font for symbols that were not used in the subset. Another reason for visible spacemarks might be that the fonts that I got from the above site were not compiled for Windows, but Linux and Unix in a wider sense, so this could also be the reason.

As it turned out some of those fonts displayed on fonts.debian.net were indeed subsets of TeX fonts, which are listed here (if not with the same extensions, like ttf, then still with the same filenames), so skimming over that list should help in distinguishing the fonts that should not be downloaded in the first place, unless you know exactly what you want. The fallback system in TeX is called Metafont, so spaces are probably there, too.
Furthermore, when creating the table, it turned out that the text had to look good both in high contrast (black on white) and in lighter incarnations. I haven't put that yet as a requirement.

Result:

The following is a quick-and-dirty preliminary report, as I have yet to do more research on small caps fonts on the subject.

The fonts I included in the table are only those that passed the requirements, well, somehow:
• Whether any example resembles the cut-into-stone effect of Trajan, is debatable, at least they're Roman;
• They must be reasonably light even when in boldface;
• The winners' most common denominator is that their small caps really are what they say they are, unlike with Trajan, where actual capitals are only slightly larger, which makes the alternatives metric-wise imperfect.

Fonts in the results image and table are in medium size, which defers to the browser and operating system default (typically 12pt). Since even small caps are small, then any smaller-sized text with some of these fonts is very likely to be less legible.

In the image, I've avoided using the actual Trajan Pro font, which is non-free, and resorted to using contours of the text that use it. In a table below the image, the Trajan Pro row text is formatted in that font, but the font is displayed only when a client computer actually has it (otherwise the browser will defer to the blog's default body text font). To fully comply, I've formatted the heading row with the Liberation Sans font (with fallbacks to Helvetica, Helv, sans-serif).
Trajan Pro FOSS alternatives
Results table
Font name
Test wordNotesOverall mark
Trajan ProKülalisteraamatReference
Romande ADF Style StdKülalisteraamat++++
LMRoman10-CapsKülalisteraamatSlightly fatter+++
Berenis ADF No2 StyleKülalisteraamatLegible, but small caps are small...++
The below fonts are fallback fonts with small caps. Conga might be a non-free font, although it's been included in a version of Knoppix.
CongaKülalisteraamatKnoppix 4.0.2, fallback
Copperplate Gothic LightKülalisteraamatWindows, fallback
CastellarKülaliste­raamatWindows, 2nd choice fallback /note that "lower-case" capitals are level with "upper-case" capitals
Felix TitlingKülalisteraamat
Perpetua Titling MTKülalisteraamat
The below fonts, while having "small" caps, were found in Windows, but they don't qualify because of various visual aberrations.
Copperplate Gothic BoldKülalisteraamatWindows, fallback /Ugly when bold, but small caps are smaller
Engravers MTKülaliste­raamatWindows /Too large
AlgerianKülalisteraamatWindows /Too ugly
I intend this post to be a work in progress of sorts, so I hope to make further updates.

N., 06.09.2012. update:

Fonts with small caps that didn't make the cut:

Aegean /incomplete
Akkadian /incomplete
Analecta

Computer Modern Roman Regular Small Caps / CM Roman /ugly
TeX Palladio L Small Caps & Old Style Figures / TeX Palladio L

Irianis ADF Style Standard Regular / Irianis ADF Style Std
Linux Libertine O Capitals / Linux Libertine O C

Text about Free software alternatives to Segoe UI was moved to a separate post.

Sunday, November 16, 2008

Netiquette: Large images and the Internet

In July 2008, a family member far away wrote me that she had been having trouble sending images to people. So here's an article that I initially wrote for her, but decided to re-edit and publish it in here for all to read. She sent me four very large photos.

Netiquette

The photos in their original photographed size are very large, which is why most Internet service providers intentionally impose technical limitations in their e-mail servers on the size of e-mail that can be transferred. The original large size of the photos is useful for when there's a need make high-quality prints (even above the 3x4" or 10x15 cm range).

When view digital photos in a new computer, then it is powerful enough to be able to temporarily resize them to the proper viewing size every time they are opened for viewing. This functionality may create an illusion that the images are not as large as they really are.

An important part of the netiquette in e-mail is to send messages that have reasonable sizes, so as not to constrain all the server computers and network traffic routers through which e-mail passes through. All servers have restrictions as to how large an outgoing message can be. A user's outgoing server may have lax restrictions, the addressee server may not.

Photos that people send to others are usually very likely to appear in a message in-line, when that message is being viewed in an e-mail folder. Some e-mail programs allow automatic resizing of images, so they equally create an appearance of a size that fits.

One solution is to send large photos on a piecemeal basis, especially if there is an actual requirement to send large images.

One way to know how much a sender can send at a time is to see the error message of a returned letter. Somewhere down there must be an error message stating the permitted space limit. Note that addressees' servers' limits on the size of incoming messages always differ. Pass-through mail servers may also have their internal space limits.

Another solution to sending images is to compress them into one .zip file, for example. In Windows XP and Vista, there is a built-in compression program with functionality to select a bunch of photos, then click on the selection with the right mouse button and select "Send To" > "Compressed (zipped) Folder".

Oftentimes (and even then) the collections of photos even in a compressed file may end up too large. Compression of files also takes time, so if there are lots of large files, compressing and uncompressing them takes some time.

Resizing/scaling images

Yet another solution is to resize all images to something the expected size of people's screen resolutions. For example, the four photos I received this February were each more than two megabytes in size and that is really huge. Even individual images are large. One way to reduce their size is to scale them down with a good image processing program.

For example, a particular group pose photo I received is 3264x2448 pixels in size (width x height). This would probably fit a large wide-screen monitor or be proper for an equally capable projector. Most people's computer screens are nowadays set to 1024x768 pixels.

When opting to send a fair number of not-so-small photos through online means, then, yes, it is a really good practice to resize them.

My favourite tool for this is The GIMP &nmdash; The GNU Image Manipulation Program (GNU is a recursive acronym for GNU's not UNIX). The latest release is 2.6.2 and it contains many improvements over the 2.4.x [development] branch, the major version that I had been thinking of mentioning when writing this instruction set long before the 2.6 version suddenly came out.

The GIMP is available from gimp.org

If there are many images...
For batch processing, there is a plugin for GIMP called DBP — or David's Batch Processor. DBP is available from here. (Download link on the left side of the page.)

Extract the executable (an application) into this directory (it's better if GIMP is not running at that time):
C:\Program Files\GIMP-2.0\lib\gimp\2.0\plug-ins
Run GIMP after that and the extension is under the Filters menu as a "Batch process..." command. Note that the extension also launches a command-line window. It can be minimized.

The user interface of the Batch process plugin is more or less straight-forward.
  • When adding images, choose those that are similar in their features — for example that the width of every image should be longer and height shorter: the batch processor will otherwise make a portrait-positioned image out of landscape-shaped images ugly. The resultant image can later be turned to the suitable portrait/landscape position.

  • Under Resize tab, enable the Resize function.
    If the image size is 3264x2448, then it is important to first test through an individual scale process to see what the results are. Choose Scale from the Image menu.

    For example, scale the image to resize it to a 1024 pixel width (the height is calculated automatically). The result should be 1024x768, if the aspect ratio is 4:3 (or 3:4), if memory serves me right.

    The reason for this is that while the DBP plugin's resize function allows relative resizing whilst keeping the aspect ratio, it's impossible to tell what the resultant width in pixels would be.

    That is why I choose absolute resizing, knowing that the aspect ratio will be maintained, if I set the absolute width and height to 1024x768 pixels — if a 3264x2448-pixel image scales to 768-pixel height if the width is previously set to 1024 pixels.

  • The Rename tab's functions allow choosing a different destination directory and in the Output tab a relevant image format must be specified — JPG for photos and PNG for non-photographic material (pictures, screenshots, drawings, etc.). After setting JPG as the output format, the image quality must be set to 100 (the output will still be considerably smaller, even with a 100% image quality). Other things can be left as default.

Optical Disc authoring

One way of physically sending a large batch of photos is to buy a quality optical disc (typically one with gold as the default/main metal of use; Some products are geared/optimized toward a certain task, such as audio burning, data, photos, etc.), such as a CD-R (Recordable) or CD-RW (Rewritable) from a known brand with a history of producing writeable media (EMTEC, Verbatim, TDK, Philips, Sony, Maxell) — and burn the photos there.

For more size, a recordable DVD presents a good option. There are several recordable DVD formats, but it's best to choose the format that the optical disc writer at hand supports. Both CD's and DVD's come in various sizes, so if there's only up to 200 megabytes of photos to burn, an equally fitting pocket-sized CD is the ideal option — only that it may cost less than a vanilla 650–700 Mb CD-R. Standard-issue CD-R-s can store from 650 to 700 megabytes, depending on specification.

Rewritable optical discs (marked with XXX-RW or XXX+RW) are useful for testing. When I last burned data, I discovered a rewritable CD was very useful, because of a program setting I forgot to set in K3b, an optical disc authoring program in Linux, and so several burning sessions were lost and this allowed me to make mistakes. Rewritable optical discs have lesser storage latency, though, compared to one to which data is written to permanently.

On the other hand, rewritable discs are great for short-term projects, such as when using a backup application for the first time or trying out another program for disc authoring.

In addition to selecting a quality disc, the packaging also shows the suggested recording speed or a range of speeds. I've seen TDK's CD-s' packaging with the specification of "Up to 52x" writing speed. The great thing about it is that such language is not ambiguous.

Some writeable CD's have specified 4–16x writing speed. While 52x writing speed may be fast and may save time, it may not be useful for long-time storage of data, as error correction information is not saved because of such a speed of writing, so choosing the slowest possible speed is best for long-term storage, provided that the disc is equally suited for it.

Optical discs are also sensitive to elements, so that combining all the best practices reduces the chances of data loss. Some good disc manufacturers already produce optical media that have protection against elements, such as ultra-violet light and scratching. They are more expensive and usually geared toward heavy-duty use, but are all the more durable.

Once a burn is complete, it's important to use a marker specially labelled to be used on optical discs (CDs and the like).

More in a Wikipedia article about CD-R's, with plenty of essential advice on authoring an optical disc. The right-hand sidebar also shows links to other formats, just that CD-R is one of the cheapest ways to store data longer-term off a hard drive /my own long-term experience has shown that hard drives may eventually fail.