permalink
© Copyright KINGdesk, LLC, some rights reserved.

As we have begun implementing new HTML5 elements into KINGdesk’s designs, a new bit of code is required. HTML4′s defined behavior for handling of unknown elements requires inline treatment. This requires use of HTML5 block level elements (such as <section>, <article>, <header>, and <footer>) be explicitly defined as such for proper handling… for a common foundation. Additionally, many new elements (both inline and block level) should reasonably be included in the initial CSS Reset style clearing rule. As such, I am now using the following modified version:

/* v1.2 | 20100218 */

/* Eric Meyer's original CSS Reset is found at
   http://meyerweb.com/eric/tools/css/reset/ */

/* This version's permalink is
   http://kingdesk.com/articles/css-reset/ */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
section, article, aside, hgroup, header,
footer, nav, dialog, figure, menu,
video, audio, mark, time, canvas, details {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}
section, article, aside, hgroup, header,
footer, nav, dialog, figure, figcaption {
	display: block;
	}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
:focus { /* remember to define focus styles! */
	outline: 0;
	}
ins { /* remember to highlight inserts somehow! */
	text-decoration: none;
	}
del {
	text-decoration: line-through;
	}
table { /* markup tables with 'cellspacing="0"' */
	border-collapse: collapse;
	border-spacing: 0;
	}

Purposefully excluded from the above CSS reset are the following HTML5 elements:

• embed
• progress
• meter
• ruby
• rt
• rp
• command
• datalist
• keygen
• output

permalink
© Copyright KINGdesk, LLC, some rights reserved.

Download Video: High – 960×540 | Low – 480×272

permalink
© Copyright KINGdesk, LLC, some rights reserved.

If you are using a modern WordPress theme, this should work automatically after plugin installation. If it does not, you will need to follow these directions:

1. Log in to your WordPress admin panel as an administrator.
2. Go to Appearance > Editor
3. Select the Comments (comments.php) file — Popup Comments (comments-popup.php) if you use popup comments.
4. Locate the opening HTML tag that wraps individual comments. This will be inside of a PHP foreach statement. The opening tag should be an HTML div or li element.
5. If this element already has a class name assigned, add the following code within the class name’s quote marks:

   <?php if (method_exists($wpac, 'author_comment')) $wpac->author_comment();?>

6. If this element does not have any classes assigned, add the following code within the opening before the end of the opening tag:

   class='<?php if (method_exists($wpac, 'author_comment')) $wpac->author_comment();?>'

7. Click the ‘Update File’ button.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

KINGdesk Web Design is proud to make available wp-Typography, a merger and expansion of the wp-Typogrify and wp-Hyphenate WordPress plugins and SmartyPants functionality.

Features

wp-Typography is now a one-stop-shop for improved web typography in WordPress. It features the following capabilities (including granular control):

• Hyphenation
• Spacing control, including: gluing values to units, widow protection, and forced internal wrapping of long URLs & email addresses.
• Intelligent character replacement, including smart handling of: quote marks ( “foo” ), dashes ( foo–bar ), ellipses ( … ), trademarks ( ™ ), math symbols ( 1024×768 ), fractions ( 12/23 ), and ordinal suffixes ( 3rd )
• CSS hooks for styling: ampersands (class “amp”), acronyms (class “caps”), numbers (class “numbers”), initial single quotes (class “quo”), and initial double quotes & guillemets (class “dquo”).

Requirements

wp-Typography has the following requirements:

• the host server must run PHP 5 or later
• text must be encoded UTF-8
• all markup must be valid xHTML, specifically:
  • every element must be closed,
  • every attribute must have a value enclosed in quotes, and
  • tag names and attributes must be lowercase.

Related

Additionally, the core functionality of wp-Typography (completely segregated from the WordPress plugin requirements) has been released as a standalone project, ready for integration with any other PHP based content management system. For more information, please visit the PHP Typography project page.

Your feedback is much appreciated. How can we make this plugin better? Email us at info@kingdesk.com, or leave a comment below.

permalink
© Copyright KINGdesk, LLC, some rights reserved.

Features

PHP Typography is a PHP based solution to greatly improve web typography. It features the following capabilities (including granular control):

• Hyphenation
• Spacing control, including: gluing values to units, widow protection, and forced internal wrapping of long URLs & email addresses.
• Intelligent character replacement, including smart handling of: quote marks ( “foo” ), dashes ( foo–bar ), ellipses ( … ), trademarks ( ™ ), math symbols ( 1024×768 ), fractions ( 12/23 ), and ordinal suffixes ( 3rd )
• CSS hooks for styling: ampersands (class “amp”), acronyms (class “caps”), numbers (class “numbers”), initial single quotes (class “quo”), and initial double quotes & guillemets (class “dquo”).

This project merges, builds upon, and generalizes the functionality of wp-Typogrify, wp-Hyphenate and SmartyPants.

Implementation

While complication is added when manipulating the many options, implementing PHP Typography can be as easy as this:

<?php
$html = "raw HTML here... ";

include('path/to/php-typography.php');
$typo = new phpTypography();
$html = $typo->process($html);

echo $html;
?>

PHP Typography is designed for easy integration with plugin architectures of PHP based content management systems. It has already been ported to WordPress and Zikula CMS. We would like to see other developers pick up this code and implement it for other CMSs. Specifically:

• Drupal
• Joomla
• Expression Engine

If you are a developer for these (or any other PHP based CMS), the heavy lifting is done. You just need to hook it into your CMS.

Testimonial

Here is a fine testimonial from Jenny (who also provided some valuable feedback to further improve the project):

I’ve been evaluating PHP Typography for use in a custom CMS and have been very pleased so far…. It was, as you promised, easy to integrate in our framework (ZF) by wrapping it in a simple class implementing Zend_Filter_Interface. I am using PHP Typography after running the text through HTMLPurifier, and the output has been beautiful thus far.

Requirements

PHP Typography has the following requirements:

• the host server must run PHP 5 or later
• text must be encoded UTF-8
• all markup must be valid xHTML, specifically:
  • every element must be closed,
  • every attribute must have a value enclosed in quotes, and
  • tag names and attributes must be lowercase.

Related

It should also be noted, PHP Typography would not have been possible without another tool we have recently released: PHP Parser. PHP Parser is an amazingly powerful resource that allows HTML to be parsed, modified and reconstructed in ways previously not possible.

Your feedback is much appreciated. How can we make this plugin better? Have you developed a plugin using PHP Typography? Email us at info@kingdesk.com

permalink
© Copyright KINGdesk, LLC, some rights reserved.

permalink
© Copyright KINGdesk, LLC, some rights reserved.