Experimental Lex

Playing with words.

HTML5 Storage in EPUB

I’ve been working on some personal ebook projects recently and wanted to find out if I could use HTML5 storage in an iBooks EPUB.  The answer is not quite.  If you have information to the contrary, please let me know.

Here’s a code sample I used to increment the score for a user as they completed different activities.

function addScore() { 
var db = window["localStorage"]; 
var counter = document.getElementById("flipcount"); 
if (db["score"] != undefined) 
{ var c = parseInt(db["score"]); 
db.setItem("score", c+1); 
counter.innerText = db["score"]; 
} else { 
db.setItem("score", 1); 
counter.innerText = 1; 
}
}

It seems the iBooks does not recognize “localStorage”, though it does recognize “globalStorage”. Unfortunately, it doesn’t save the information after you leave a page.  Ideally, it would maintain it in a session that is accessible across all of the pages in a single ebook.  I hope this is fixed in an upcoming iBooks update.

Advertisements

Instant and Implied Social Networks

Powerful words were spoken by Sequoia Capital regarding their investment in Color Labs along with other major investors.

“They told us that every 10 years or so a company and a marketplace and an opportunity come together that’s transformative,” …. “Not since Google have we seen this.”

All told, the series A funding total was $41 million.  The funding was announced in conjunction with the launch of their iPhone app and website at color.com.  (sidebar:  If it looks like a bubble, walks like a bubble and talks like a bubble.com, then it is probably a bubble).

And if you ask around, you will find mostly negative opinions of the app, the website, and the 41-million-fucking-dollars.  Maybe a good question to ask is: Does bubble equal stupid? I think the answer was yes during the first bubble over a decade ago.  This time round, I don’t think this is automatically true.

In the case of Color Labs and Sequoia, there is a rumored rationale at work here.  It was said that the Color app demonstrates the “implied social network”.  By making the assumption that a bunch of people using the same photo-taking and sharing app within close proximity of each other, they should automatically be treated as “friends” or at least the same social network.  The result is a digital photo album based on the aggregated people and photos taken at an event.

So what?  That might seem underwhelming as a first product for a $41MM investment.  Yet, the premise is intriguing.  If you look at the big social networks (e.g. Facebook, Twitter, LinkedIn), it feels like there is too much work involved with creating and managing your social profiles.  The beauty in life is randomness … the serendipity that makes you accidental friends with people you meet through interesting circumstances.  Often, that moment lasts for a very short time.  And sometimes, it is a catalyst that extends that moment for a very long time.

Regardless, the beauty in that moment is still there.  I believe there is something important to be explored and discovered here.

The Social/Mobile CRM Opportunity

I keep thinking there is a big opportunity for innovation with social/mobile CRM, though I am still figuring out the details.  Like last time, I think I will just riff on the topic until I get my ideas sorted out.

In the traditional CRM world, businesses are concerned mainly with sales, leads, and marketing campaigns.  For some businesses, CRM is the process of contact management in the context of getting customers and making sales.  From this point of view, a CRM is a system where you can enter and manage data relating to opportunities and leads with the objective of converting leads to customers and generating sales.

Another major area of CRM is e-mail marketing and its offline counterpart, direct mail marketing.  E-mail marketing is a really big industry that continues to thrive.  10-15 years ago, there were startups making it big by offering tools that helped businesses manage and send email blasts.  In fact, I had the privilege of working with Rosalind Resnick a few years ago.  Rosalind pioneered opt-in e-mail marketing through her company NetCreations.  She took the company public in 1999 and later sold it for $100+ million and only moments before our beloved Internet bubble had burst.  Not too shabby.

Today, I still hear stories about young (and old) entrepreneurs building startups that help businesses with e-mail marketing campaigns.  And I get especially annoyed when I hear stories from teenagers talking about making their first $million by age 18 doing exactly this. (i hate them)  If there is a lesson here (besides drop out of college and build a startup), it is that e-mail marketing will continue to be a powerful and obvious channel.  To reach the inbox of a person who has not explicitly unsubscribed is like a perfectly targeted Google ad.  The nonstop brand awareness you get is worth it and it might lead to a conversion or two.

There’s really too much information to cover on the topic of CRM systems and e-mail campaign management.  I will just say that tracking and measurement of user actions in e-mail campaigns is the critical thing.  When you open an email, that activity is tracked as an “open” event and later reported as part of the e-mail campaign metrics.  When you click on a link in a campaign e-mail, the activity is tracked as a successful “click” event.  The laborious effort of creating and delivering an e-mail campaign is validated by successful “opens” and “clicks”.

Each the CRM models discussed above is focused on a transaction within a workflow.  A new opportunity or lead is entered into the CRM, which triggers a series of followup interactions with the objective of generating a sale.  A marketing campaign that generates new website registrations (also a transaction) has the objective of converting the new registered users (aka, leads) into real long-term customers.

With this speculative social/mobile CRM opportunity, the same basic guidelines apply, although the contact management and end-game are different.  Whereas traditional CRM is focused on eventually making a sale, social/mobile CRM is more about customer service.  At the core of social and mobile technologies is the ability to interact and share while you are “on-the-go”.  In this mode, buying stuff online is not the priority.  Often, it is something that you need in the moment.  Such as, answers to questions about how to get the thing you need.

Thus, social/mobile CRM looks like another branding and customer service exercise.  Is that all there is? Perhaps.

It all depends on whether you can guide the customer down a conversion path.  Not necessarily a path to buying stuff.  The real conversion would be social sharing.  Social media is all about the network effect.  If you can get one person to share with a few more people, the overall effect can be 1,000 times more powerful than lead generation and another 1,000 times more powerful than sales conversion.  The real objective here is to understand and collect as much social data as possible.  If you walk away from the campaign with thousands or millions of new social contacts, that’s a mighty powerful thing.

Riff on Internet Startups

Alas, I am reduced to this.  I haven’t written anything in months while I have pursued my elusive dream of startup fame and fortune…  Still working on it… And so I am writing this blog post to get some thoughts out of my head and perhaps find some clarity amid the fog of ideas.

The year is 2011.  Look back 10 years and think about what was happening then.  Our first grand Internet bubble had burst and startup companies were dying everywhere.  Hundreds of millions of dollars of venture capital investments suddenly disappeared.  A few companies were able to survive, but they had to cut costs drastically.  That meant continuous layoffs and very little hiring.

If you were an entrepreneur or part of a startup back then, you were well and truly fucked.  Nobody wanted to invest in anything.  They called this period the “nuclear winter” for startups and venture capital.  I think Marc Andreesen coined that term.  I remember a funny Internet meme at the time.  It was the quote “Please God, give me just one more bubble”.  The brilliant Paul Kedrosky turned it into a bumper sticker which you can find here on CafePress.

Well my friends, ten years later, we have our new Internet bubble.  Let’s not debate whether this is or is not a real bubble.  It won’t be the same as the last one for all the reasons that have already been said. Let’s just say that this is an extremely favorable time for getting funding for startups.  Some say this bubble will last through 2013.  If you waited ten years for this bubble and now it is here, what are you going to do about it.

You might say to yourself, “I sure as fuck will not miss this one”.  That’s what I’m saying.  And yet, you should carefully plan your approach to taking investor money and launching your business.  If you look back at the great Internet companies today, most were founded after the first bubble had burst or were quietly getting started (i.e., Google, Twitter, Foursquare, Facebook).

Do you want to be one of the startups that got funded, launched big and then flamed out?  Maybe that’s better than nothing.  My feeling is that there will be plenty of flameouts and I wonder if any of the founders will walk away with any money or their reputations intact.

It seems to me that it would be better to create something of value and look for the fastest and best exit strategy.  Take the cash off the table while you can and save it up for the post-bubble.  After the bubble, talent will be cheap, new opportunities will arise, and it will be a very good time to have some dry powder in your guns.

My Mobile App Ideas: ClassReads and the Share Bank

Last week, I found myself on one of the Nokia websites and heard about a contest they were sponsoring. It’s called the Ideas Project .

Yes, OMG. The SXSW conference. Even if you could find a flight, it’s unlikely you would find a hotel room close to the event. And suddenly, I wanted to go real bad. Especially if the flight and hotel were covered. So I spent some time thinking about some winning ideas for mobile apps. I came up with two and here they are:

CLASS READS

The ClassReads app finds and displays classroom materials that would ordinarily be printed and distributed on paper. Class members can also suggest additional reading material by submitting them to the instructor or teaching assistant. If approved, the shared content would be published to students in the class direct to their ClassReads app. Of course, students can also access the shared content through the ClassReads website or receive content via e-mail if they wish. Alternately, I imagine the website could also be something as simple as Google Groups which has a built-in tools for managing membership and discussions.

With ClassReads, learning becomes a collaborative and social experience. It also allows knowledge and discussion to extend beyond the walls of the classroom and deliver helpful and timely content to students in real-time.

SHARE BANK

The Share Bank app is like a mobile karma bank that facilitates sharing with those in need. Many of the essential things that the homeless and poor need on a daily basis (i.e., food, shelter, supplies) are often available, yet they have no way of knowing when and where. The critical piece here is to provide them with basic cell phones with prepaid phone plans so they can request help or receive broadcast messages with details on what is available and where. Simply having a phone can dramatically improve the lives of the impoverished and homeless, and I believe that mobile carriers and phone manufacturers have a surplus of phones that they can donate.

The Share Bank app would allow anyone to easily share food and other supplies by posting the information through the app. The Share Bank app also provides a way for donors to contribute money for prepaid minutes to help those who need them. Those who contribute regularly can also earn a karma balance, which is a nice way of recognizing them for their contributions.


Lies, Damned Lies, and Mime Types

If you’ve ever had the joy of building EPUB files and struggled with the cryptic error messages produced by epubcheck, you might find this interesting. I was having a number of facepalm moments the other day while dealing with an image icon for a Twitter user. My new Twitter friend @longreads is giving me a steady stream of wonderful content to read. And yet, I was having an awful time trying to figure out why epubcheck was rejecting the longreads Twitter icon as having the wrong mime type.

Here is the url for the icon . It has a “.jpg” extension which suggests that its mimetype is “image/jpeg”. If you download the file and open it in an image viewer app like the Preview app for Mac, it can tell you that it is actually a PNG file. In my automated workflow, this little time bomb silently waits until the EPUB is created before it announces itself during epubcheck validation.

I was previously using the file extension to determine the mime type, and that was obviously not going to work in this world of deceptive file names. Moreover, there are image urls that do not have any file extension. So, I tried to get clever and check the “Content-Type” header in the response when downloading files. However, I even found that this was not always correct.

I did some research on existing open source tools (Java and Python-based) and it is surprising how many use the file extension as the main determinant. And the tools that actually read the file header were said to be buggy. So, it dawned on me later that I should just look into the epubcheck source code and find out how it was reading image types.

Here’s the source code for BitmapChecker.java in the epubcheck source code. As is, it is not designed to be used externally so I created a copy and compiled it into a command-line tool like epubcheck. It is called MimeCheck and you can run it like this. It reads the file header returns the mime type.

$ java -jar mimecheck-1.0.jar twitpic.jpg

image/png

That only works if the file is in the same directory as the mimecheck-1.0.jar file. You can also provide the absolute path and it works the same. Here’s a download link for the jar file if you are interested in using it.

http://s3.amazonaws.com/LEX/share/mimecheck-1.0.jar

Let me know if you have any questions or if you need the source code. I think I have a few other EPUB-related tools that I can contribute and perhaps turn this into an open source project on Google code. That depends on whether anyone else finds it useful. I realize that not many people need to do automated builds of EPUB files.

Title Hashtagging

I saw the most remarkable thing today.  At work, we were happy to see a nice blog post about our Flurrious.com site, where you can design your own snowflake and share it with friends.  I wanted to share the article on Twitter, so I clicked on my Bit.ly bookmarklet which opens up a sidebar where I can share a shortened link on Twitter.  Bit.ly automatically crawls the web page title and other metadata and the page title looks like this:

#GoodSpotting: Flurrious Makes Snowflakes, Grants Wishes

The #GoodSpotting hashtag at the beginning of the title was automatically included as part of the default Twitter message.  Facebook also crawls URLs to obtain the web page title.  When anyone posts a link to this article through Bit.ly, Facebook, or other sharing sites, the title and hashtag will likely be included.  Now that’s clever.  I’ve never seen that trick before and it’s astounding to me how simple and effective this is.  The basic principles of website SEO and SEM are pretty well-known.  Yet, social networks and content sharing force us to re-examine our SEO strategies.

Personal Attention Databases

A number of years ago, the well-known entrepreneur Seth Goldstein, along with Wall Street legend Lew Ranieri, launched a startup called Root Markets. The focus of Root Markets was the attention economy and the concept was to give users the ability to track their online interests and share that data with Root Markets. The theory was that your attention had value because you were a potential sales lead for various products and services. And therefore, your “lead” data along with everyone else’s could be traded as commodities in an exchange marketplace. Highly speculative definitely and perhaps a little ahead of its time.

It’s probably been a while since I or anyone else has thought about Root Markets. It seems that they quietly closed up their operations and very few noticed. Yet, the attention of Internet users is as important as it ever was and the attention economy continues to thrive and evolve. With the dramatic growth of mobile computing and social networks, the attention economy is expanding along new trajectories.

I bring up this obscure reference to Root Markets to introduce this concept of personal attention databases. One of the challenges that Root faced was storing and presenting your attention data in a useful way for users. While thinking about The Social Content Graph, I have been contemplating this problem – how to track the content and people that you like as you hop across devices, services, social networks, and content publishers. I called it a “complex beast” and that is an accurate description.   To simplify things, I will start using the acronym “PAD” as a replacement for personal attention database.

In the first decade of the Internet, users bookmarked the content they wanted to keep or revisit. Social bookmarking sites like Delicious.com made it easier to manage thousands of bookmarks by applying “tags” to bookmarks and therefore making your bookmarks database searchable. Delicious.com is definitely one of my favorite Internet innovations ever created and I certainly hope they survive and continue to keep my universe of bookmarks at my fingertips. This was the first generation of PADs. And now, we are contemplating the next generation of PADs, capable of mapping the social content graph.

Attention Spaces

This supremely complex goal of mapping attention in your social content graph requires that we toss around some ideas about how it might work. One feature that does not exist today with social bookmarking is the logical separation of your attention “spaces”. For example, work versus home. I use Delicious avidly and it is really the only bookmarking tool I want to use. Yet, I sometimes use Google Bookmarks and Faves.com, because I want to separate the different pools of content.

The need for separate attention spaces becomes more critical when you try to imagine a personal attention database that includes your social graph. A useful comparison is the logical separation of your social networks across Facebook and LinkedIn. Obviously, you want to keep it professional on LinkedIn and not share YouTube videos or party pics, and vice versa with Facebook. Hence, our theoretical PAD design would automatically provide separation of Spaces, like Work Space and Personal Space. (If you have a better name for “spaces”, please let me know.)

Editor’s note: This article has already taken several days to write, so it’s time to wrap it up and come back to it later.

You heard the man. I’m closing out this post and will continue with it later. I’d like to avoid publishing something really dumb while pretending it is not. Next time, we will look at the content types we like to follow and the different patterns of content consumption.

The Social Content Graph

Greetings and happy holidays! Apologies for not publishing anything lately. I feel physical pain every day that goes by when I am not writing anything. Possibly, my choice of long-form articles have hampered me from reaching that tipping point where writing becomes an easy and fluid task. So, we will try a new approach by writing lighter pieces. Many of these might look like “fluff” pieces based on current news, personal views, and speculation, yet still within the general universe of digital publishing and mobile content. We can worry about how to re-assemble this content into a book some other day. The only thing that matters is actually writing.

With that said, I would like to discuss my vision of the social content graph. This is not a new term and I have not researched prior usage of this term. However, I do feel it is a meaningful term that has relevance to digital publishing. When you look at the entire spectrum of companies, platforms, software, and content in the extended digital content ecosystem today, you will recognize that reading is becoming more social.

That may sound like Captain Obvious talking. Nonetheless, this is the essence of the social content graph. The term “social graph” is well known and widely used in reference to a person’s social network. A person with a large number of Twitter followers and Facebook friends has a large social graph and the content they share has a powerful “network effect”. Perhaps it’s just the technical and contemporary way of quantifying popularity.

So is there such a thing as a content graph? A quick search on Google shows that it was a significant term in 2010. For example, here’s an interesting quote from this article called The Content Graph and the Future of Brands

In the Social Graph, you’re defined by your friends. In the Content Graph, a content brand is defined by its distribution relationships with other content brands.

Unfortunately, that’s not the Content Graph I am thinking about. Instead, I am trying to express how digital content is published, consumed, shared, aggregated, republished, and consumed again in the digital world today. Publishers and content creators seek to publish content that is original and popular. Content is given life by consumers who share the content with others. Until the content is consumed, shared and discussed, the content barely exists. (Call up metaphors like “tree falling in the woods” or “Waiting for Godot”)

Consider the inter-twining relationships between content creators, consumers, and companies like Twitter, Bit.ly, and Flipboard in our digital content ecosystem. Sharing content via Twitter is usually done with shortened urls (generated through services like Bit.ly) which redirects users to the original URL. The importance of short URLs is a by-product of the 140-character limit that is built into Twitter. While this limit originates from the character limit of SMS messages, it also provides a universal rule that makes all messages short and easy to browse.

Anatomy of a Tweet

When browsing through Twitter messages, you see a microcosm of specialized syntax to accommodate as much content and meaning within the 140-character limit. For those new to Twitter, it can be a daunting experience trying to grok the meaning. The most basic tweet is just text from a Twitter user. In addition, a tweet can have any of the following:

  1. link: usually a shortened URL (example: http://bit.ly/eOsrVQ)
  2. #hashtag — one or more topic tags that serve as searchable metadata
  3. @username — used for replies and mentions using the “@username” format
  4. RT (retweet) — a flag that signifies when one user has republished another user’s tweet

In addition, your Twitter feed contains not only the people you follow, but also the extended conversation taking place between between people in your Twitter network and their network. Each “@” mention is a clickable link that takes you to a user’s Twitter page. Thus, it becomes another point of interest as you browse for interesting content. Yes, it seems overwhelming and yet it happens to be the best way of getting the latest and most interesting content. In the end, the Twitter messages that contain links are often the ones that are the most interesting, and the Twitter users who share the most interesting content are usually the ones worth following.

Curated Content

This brings us to curated content, which is content that is shared and republished by tastemakers and thought leaders within different areas of interest. In contrast, content that is found through organic search is not hand-picked and the quality of search results can vary greatly.

Flipboard is an iPad app that presents streams of curated content that the reader chooses, across a number of topics. Most notably, Twitter integration in Flipboard presents the links shared by people in your Twitter network in a pleasing user interface that resembles a magazine. Hence, Flipboard and other reading apps like it are an important part of our social content graph. Of course, the content you consume in Flipboard is easy to share with others through the usual channels (Twitter, Facebook, e-mail, etc).

Social Reading

When you have reading devices and apps that have social networking “baked in”, you have the beginnings of a social reading experience. Curated content that is recommended to you through your social network is an entry point to social reading. Social reading is also found at a deeper level, where readers can share bookmarks, comments, and quotes from the content they are reading within their social network or with everyone. Such social reading features are found in the Amazon Kindle reader and may have originated there. We are starting to see this kind of social reading and sharing in education reading apps like Inkling.

Mapping the Social Content Graph

I’m going to admit that my concept of the Social Content Graph is still half-baked, and I think that’s ok for now. The point I am trying to make is that the social content graph is a complex beast, since it is a chain of people and content links. The reason why Flipboard is such an excellent reading experience is that it understands that this is a complex beast and it tries to organize it for you in a way that makes it pleasing to browse and consume.

And yet, Flipboard is just a reading experience and does not help you understand and organize your social content graph. You still need to bookmark or republish the content you like if you want to be able to find and re-read content in the future. That feels a little weird to me… sharing by Twitter just because I don’t have a convenient way of mapping and saving the parts that I want to keep.

In my mind, I have this mental image of a social content graph somehow looking like that clever visualization that you see in a LinkedIn profile that shows how you are related to another person. It nicely illustrates the “degrees of separation” between you and others on LinkedIn. And the ideal visualization of my social content graph would be something like that. It would show me a 2D/3D spatial view of the people I follow and the content I like, and it would let me pivot the view along the people axis and the content axis. Someday, it would be nice to explore the reverse angle and see the people who follow me or like the content I have shared or created. Yeah, whenever that happens.

Page Layout Hacks in HTML5 – Part 2

Let’s keep going on this topic. The first post laid out some of the challenges that were faced in using HTML5 as the display format for an iPad app. Essentially, that also means it was used as the source format where the text copy was mixed in with the code. That has to be some kind of programming anti-pattern where the view logic is mixed with the business logic. In this case, the business logic is defined by the user experience requirements which calls for horizontal page flipping with multi-column text layout and fully-justified text.

As we continue this exploration, it becomes more clear that the external development team did not understand the modern CSS technologies that are now available for handling these kinds of display requirements. All things considered, this area of HTML and CSS is somewhat obscure… really an “edge-case” for most of the web development world. Almost all prior web design and development has relied on arbitrary pagination of vertically scrollable pages instead of pagination based on a fixed page/column size. Without the devices that would impose specific pagination constraints, these programming techniques were mostly unknown and virtually irrelevant.

While we continue to research the so-called “right way” of structuring HTML5 content to support text reflow between columns and pages, we should still look at the hacks that were necessary. Hacks seem to be a constant in any programming endeavor.

Aesthetics of Magazine-Style Publishing

In newspaper and magazine publishing, multi-column article layout is the norm and full justification of text is pretty standard. The narrower columns are meant to be easier to read, since the readers’ eyes have to do less work while scanning words from one margin to the other continuously. This also improves the readability of the content, since it becomes less likely for the reader to get lost in the middle of a long sentence.

The full justification of text forces each line of paragraph text to use the full width of the column (with the exception of the last line), and this gives the content a cleaner look. Without the full justification, the text is (usually) left-justified and the other margin has a “ragged” edge.

This improved readability creates additional challenges. Often, there are places in the text where long words close together get word-wrapped in an inconvenient place which results in excessive spacing between words. With the narrower columns of multi-column layout, this problem is compounded.

In addition, the usual concerns of widows and orphans need to be addressed. When paragraphs are split across pages and columns, there are often problems where a single line from the beginning or end of a paragraph is stranded by itself at the top or bottom of a page/column.

Web-Based Reading

On web pages, article content is usually presented in a single column and readers are expected to scroll down the page to continue reading. In addition, the paragraph width for an article is usually narrow, which is meant to improve the readability. This has the side effect of making the article longer in terms of vertical space. A long article on a website might have pagination links, but there is no obligation for the page content to fit into a single viewable page area. Hence, vertical scrolling is usually a requirement in web-based reading.

E-Book Reading

For digital book publishing, page layout is less of a concern since paragraph text is meant to reflow smoothly regardless of screen size. Yet, e-book readers like the Kindle and iBooks are designed to simulate the book reading experience by providing pagination of content in a non-scrollable page. The horizontal page-flipping experience is also part of most e-book readers which is important to book-lovers and purists.

Tablet-Based Reading

The coming revolution in digital publishing is being driven by tablet-based devices like the iPad. For publishers who want to provide a magazine-style look and feel, it may be necessary to support a multi-column layout and often with full-justification of text.  In the remainder of this article, I will share some of the tricks and hacks that might come in handy if you are forced down this perilous path.

Code Hacks

Force Justifying the Last Line

With fully-justified text, the last line at the bottom of a column or page is the one you have to worry about. In order to force-justify a line, you need to employ a trick that makes the paragraph think there is more text that continues on the next line. In the example below, we inserted a <span> tag with the style visibility:hidden and within the tag we have long series of characters. Together, this simulates a long word that gets word-wrapped to the next line, yet is invisible.

<p>One morning, as Gregor Samsa was waking up from anxious dreams, he discovered that in his bed he had been changed into a monstrous verminous bug. He lay on his armour-hard back and saw, as he lifted his head up a little, <span style=”visibility: hidden”>aaaaaaaaaaaaaaa</span></p>

Tweaking Word Spacing

Sometimes, paragraph text will split across pages or columns in an unattractive way. For example, an orphan line that continues in the next page or column. That will happen often. One way to handle this is to increase or decrease the number of pixels between each word by setting the word-spacing CSS style. This will often help you get the text reflow you want.

<p style=”word-spacing:2px;”>Gregor’s glance then turned to the window. The dreary weather—the rain drops were falling audibly down on the metal window ledge—made him quite melancholy.</p>

Note: the word-spacing style only accepts whole numbers when rendered by Safari/WebKit.

Squeezing Words Together

In some cases, a line is word-wrapped even though it looks like there is almost enough space to fit the next word on the same line. One trick you can apply is to use the HTML thin space entity, which is thinner than a standard space. I was surprised to find out about it and it’s very useful in this kind of situation.

for the contact felt like a cold shower all over&thinsp;him.

Keeping Words Together

On occasion, you may prefer to keep two words together, especially when a paragraph is split between pages. This can be achieved with the HTML non-breaking space (&nbsp;). However, the &nbsp; and &thinsp; entities both have a fixed width will not stretch out in fully-justified paragraphs, which will make the word spacing like odd.

Superscript and Subscript Handling

Perfect and precise line height is important from a visual perspective and to ensure that paragraph height is consistent. When you have a two-column layout, it is important that the lines of text in each column are lined up precisely.

So, it is surprising to find out that the CSS line-height style can easily get broken by superscript or subscript text in a paragraph. If you have footnote markers, this will be a common problem. The fix for this is to modify the CSS for the <sup> or <sub> tags. Here’s an example:

sup {
font-size:10px;
vertical-align: baseline;
position: relative;
bottom: 8px;
}