1.0.4 - fixes to emoji sizing and text alignment.

- Emojis should now align properly with text regardless of line-height. - Increased emoji size to 1.3x parent element font-size (1.3em)
joypixels · Sep 5, 2014 · 41eeefb · 41eeefb
1 parent 69c7872
commit 41eeefb
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -39,10 +39,10 @@ Include the Javascript library
 ```html
 <head>
 	<!-- include via jsDelivr (or download and host locally if you prefer) -->
-    <script src="//cdn.jsdelivr.net/emojione/1.0.3/lib/js/emojione.min.js" type="text/javascript"></script>
+    <script src="//cdn.jsdelivr.net/emojione/1.0.4/lib/js/emojione.min.js" type="text/javascript"></script>
 
     <!-- basic rules for styling the emoji images -->
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.0.3/assets/css/emojione.min.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.0.4/assets/css/emojione.min.css" type="text/css" media="all" />
 
      <script type="text/javascript">
        // #################################################

diff --git a/assets/css/emojione.css b/assets/css/emojione.css
@@ -1,10 +1,18 @@
 .emojione {
-  display: inline-block;
+  /* Emoji Sizing */
   font-size: inherit;
-  width: 1em;
-  height: 1em;
+  display: inline-block;
+  width: 1.3em;
+  height: 1.3em;
+  top: -.15em; /* Oversize offset, (1.3em - 1em) / 2  */
+
+  /* Inline Text Alignment */
+  position: relative;
   margin: 0 .15em;
-  vertical-align: top;
+  line-height: normal;
+  vertical-align: baseline;
+
+  /* Background Image settings */
   background-repeat: no-repeat;
   background-color: transparent;
   background-position: center;

diff --git a/assets/css/emojione.min.css b/assets/css/emojione.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "emojione",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Emoji One is a complete set of emojis designed for the web. It includes libraries to easily convert unicode characters to shortnames (:smile:) and shortnames to our custom emoji images. PNG and SVG formats provided for the emoji images.",
     "author": "Emoji One <[email protected]> (http://emojione.com)",
     "main:": "lib/js/emojione.min.js",