diff --git a/CMakeLists.txt b/CMakeLists.txt
index bd0dc34..a7b70e0 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -141,6 +141,11 @@ endif()
 configure_file (${CMAKE_SOURCE_DIR}/src/pdf2htmlEX-config.h.in ${CMAKE_SOURCE_DIR}/src/pdf2htmlEX-config.h)
 configure_file (${CMAKE_SOURCE_DIR}/pdf2htmlEX.1.in ${CMAKE_SOURCE_DIR}/pdf2htmlEX.1)
 
+include(${CMAKE_SOURCE_DIR}/src/css_class_names.cmakelists.txt)
+configure_file (${CMAKE_SOURCE_DIR}/src/util/css_const.h.in ${CMAKE_SOURCE_DIR}/src/util/css_const.h)
+configure_file (${CMAKE_SOURCE_DIR}/share/base.css.in ${CMAKE_SOURCE_DIR}/share/base.css)
+configure_file (${CMAKE_SOURCE_DIR}/share/pdf2htmlEX.js.in ${CMAKE_SOURCE_DIR}/share/pdf2htmlEX.js)
+
 add_executable(pdf2htmlEX 
     src/Param.h
     src/pdf2htmlEX-config.h
@@ -167,6 +172,7 @@ add_executable(pdf2htmlEX
     src/util/base64stream.cc
     src/util/const.h
     src/util/const.cc
+    src/util/css_const.h
     src/util/encoding.h
     src/util/encoding.cc
     src/util/ffw.h
diff --git a/share/base.css b/share/base.css.in
similarity index 86%
rename from share/base.css
rename to share/base.css.in
index aaf3f02..81abe40 100644
--- a/share/base.css
+++ b/share/base.css.in
@@ -77,14 +77,14 @@
  * The followings are base classes, which are meant to be override by PDF specific classes
  * So do not increase the specificity (e.g. ".d" -> "#pdf-main .d")
  */
-.d { /* page decoration */
+.@CSS_PAGE_DECORATION_CN@ { /* page decoration */
   position:relative;
   margin: 13px auto;
   border-width: 0;
   box-shadow: 1px 1px 3px 1px #333;
   overflow: hidden;
 }
-.p { /* page */
+.@CSS_PAGE_FRAME_CN@ { /* page */
   position:absolute;
   top:0;
   left:0;
@@ -95,7 +95,7 @@
   margin:0; 
   border-width:0; /* required by pdf2htmlEX.js for page visibility test */
 }
-.b { /* content of a page */
+.@CSS_PAGE_CONTENT_BOX_CN@ { /* content of a page */
   position:absolute;
   border-width:0;
   top:0;
@@ -110,11 +110,11 @@
   -webkit-transform-origin:0% 0%;
   -o-transform-origin:0% 0%;
 }
-.b.opened { /* used by pdf2htmlEX.js, to show/hide pages */
+.@CSS_PAGE_CONTENT_BOX_CN@.opened { /* used by pdf2htmlEX.js, to show/hide pages */
   display:block;
 }
 @media print {
-  .d {
+  .@CSS_PAGE_DECORATION_CN@ {
     margin:0;
     box-shadow:none;
     page-break-after:always;
@@ -122,15 +122,15 @@
   }
   @-moz-document url-prefix() {
     /* fix page truncation for FireFox */
-    .d {
+    .@CSS_PAGE_DECORATION_CN@ {
       overflow:visible;
       border:1px solid #FFFFFF;
     }
-    .p {overflow:visible;}
-    .b {overflow:visible;}
+    .@CSS_PAGE_FRAME_CN@ {overflow:visible;}
+    .@CSS_PAGE_CONTENT_BOX_CN@ {overflow:visible;}
   }
 }
-.l { /* text line */
+.@CSS_LINE_CN@ { /* text line */
   position:absolute;
   white-space:pre;
   font-size:1px;
@@ -146,7 +146,7 @@ span { /* text blocks within a line */
   /* _<id> for spaces may need display:inline, which will override this */ 
   display:inline-block;
 }
-._ { /* text shift */
+.@CSS_WHITESPACE_CN@ { /* text shift */
   color:transparent;
   z-index:-1;
 }
@@ -156,13 +156,13 @@ span { /* text blocks within a line */
 ::-moz-selection{
   background: rgba(127,255,255,1);
 }
-.j { /* info for Javascript */
+.@CSS_PAGE_DATA_CN@ { /* info for Javascript */
   display:none;
 }
-.a { /* annotation links */
+.@CSS_LINE_CN@ { /* annotation links */
 }
 /* transparent color - WebKit */
-.Cd { /* css drawing */
+.@CSS_CSS_DRAW_CN@ { /* css drawing */
   position:absolute;
   transform-origin:0% 100%;
   -ms-transform-origin:0% 100%;
diff --git a/share/pdf2htmlEX.js b/share/pdf2htmlEX.js.in
similarity index 91%
rename from share/pdf2htmlEX.js
rename to share/pdf2htmlEX.js.in
index 81caadb..96c69a3 100644
--- a/share/pdf2htmlEX.js
+++ b/share/pdf2htmlEX.js.in
@@ -10,6 +10,15 @@
  */
 
 var pdf2htmlEX = (function(){
+  var CSS_CLASS_NAMES = {
+    page_frame       : '@CSS_PAGE_FRAME_CN@',
+    page_decoration  : '@CSS_PAGE_DECORATION_CN@',
+    page_content_box : '@CSS_PAGE_CONTENT_BOX_CN@',
+    page_data        : '@CSS_PAGE_DATA_CN@',
+    link             : '@CSS_LINE_CN@',
+    __dummy__        : 'no comma'
+  };
+
   var pdf2htmlEX = new Object();
 
   var EPS = 1e-6;
@@ -33,7 +42,7 @@ var pdf2htmlEX = (function(){
 
     this.p = $(page);
     this.n = parseInt(this.p.attr('data-page-no'), 16);
-    this.b = $('.b', this.p);
+    this.b = $('.'+CSS_CLASS_NAMES['page_decoration'], this.p);
 
     /*
      * scale ratios
@@ -44,7 +53,7 @@ var pdf2htmlEX = (function(){
      */
     this.default_r = this.set_r = this.cur_r = this.p.height() / this.b.height();
 
-    this.data = JSON.parse($($('.j', this.p)[0]).attr('data-data'));
+    this.data = JSON.parse($($('.'+CSS_CLASS_NAMES['page_data'], this.p)[0]).attr('data-data'));
 
     this.ctm = this.data.ctm;
     this.ictm = invert(this.ctm);
@@ -123,7 +132,7 @@ var pdf2htmlEX = (function(){
       }
       
       var new_pages = new Array();
-      var pl= $('.p', this.container);
+      var pl= $('.'+CSS_CLASS_NAMES['page_frame'], this.container);
       /* don't use for(..in..) */
       for(var i = 0, l = pl.length; i < l; ++i) {
         var p = new Page(pl[i], this.container);
@@ -137,15 +146,13 @@ var pdf2htmlEX = (function(){
       //this.zoom_fixer();
       
       // used by outline/annot_link etc
-      // note that one is for the class 'a' and the other is for the tag 'a'
-      this.container.on('click', '.a', this, this.link_handler);
-      this.outline.on('click', 'a', this, this.link_handler);
+      $([this.container, this.outline]).on('click', '.'+CSS_CLASS_NAMES['link'], this, this.link_handler);
 
       this.render();
     },
     pre_hide_pages : function() {
       /* pages might have not been loaded yet, so add a CSS rule */
-      var s = '@media screen{.b{display:none;}}';
+      var s = '@media screen{.'+CSS_CLASS_NAMES['page_content_box']+'{display:none;}}';
       var n = document.createElement('style');
       n.type = 'text/css';
       if (n.styleSheet) {
@@ -236,7 +243,7 @@ var pdf2htmlEX = (function(){
 
     get_containing_page : function(obj) {
       /* get the page obj containing obj */
-      var p = obj.closest('.p')[0];
+      var p = obj.closest('.'+CSS_CLASS_NAMES['page_frame'])[0];
       return p && this.pages[(new Page(p)).n];
     },
 
diff --git a/src/HTMLRenderer/TextLineBuffer.cc b/src/HTMLRenderer/TextLineBuffer.cc
index b97d8dd..8aab0b9 100644
--- a/src/HTMLRenderer/TextLineBuffer.cc
+++ b/src/HTMLRenderer/TextLineBuffer.cc
@@ -13,7 +13,7 @@
 #include "util/namespace.h"
 #include "util/unicode.h"
 #include "util/math.h"
-#include "util/CSSClassNames.h"
+#include "util/css_const.h"
 #include "util/encoding.h"
 
 namespace pdf2htmlEX {
diff --git a/src/HTMLRenderer/general.cc b/src/HTMLRenderer/general.cc
index a1cdbfd..4da7f4a 100644
--- a/src/HTMLRenderer/general.cc
+++ b/src/HTMLRenderer/general.cc
@@ -23,7 +23,7 @@
 #include "util/base64stream.h"
 #include "util/math.h"
 #include "util/path.h"
-#include "util/CSSClassNames.h"
+#include "util/css_const.h"
 
 namespace pdf2htmlEX {
 
diff --git a/src/HTMLRenderer/outline.cc b/src/HTMLRenderer/outline.cc
index 18c3972..b0cf5b8 100644
--- a/src/HTMLRenderer/outline.cc
+++ b/src/HTMLRenderer/outline.cc
@@ -15,6 +15,7 @@
 #include "HTMLRenderer.h"
 #include "util/namespace.h"
 #include "util/encoding.h"
+#include "util/css_const.h"
 
 namespace pdf2htmlEX {
 
@@ -35,7 +36,7 @@ void HTMLRenderer::process_outline_items(GooList * items)
         string dest = get_linkaction_str(item->getAction(), detail);
 
         // we don't care dest is empty or not.
-        f_outline.fs << "<li>" << "<a href=\"";
+        f_outline.fs << "<li>" << "<a class=\"" << CSS::LINK_CN << "\" href=\"";
         outputURL(f_outline.fs, dest);
         f_outline.fs << "\"";
 
diff --git a/src/util/CSSClassNames.h b/src/util/CSSClassNames.h
deleted file mode 100644
index 5b2c0e2..0000000
--- a/src/util/CSSClassNames.h
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * CSSClassNames.h
- *
- * Copyright (C) 2013 Lu Wang <coolwanglu@gmail.com>
- */
-
-#ifndef CSSCLASSNAMES_H__
-#define CSSCLASSNAMES_H__
-
-
-/*
- * should be consistent with base.css and pdf2htmlEX.js
- */
-
-namespace pdf2htmlEX {
-namespace CSS {
-
-
-
-// usually the class name is XXX_CN or XXX_CN<hex id>
-// sometimes we need a special one, e.g. transparent color, where the id is -1
-const char * const INVALID_ID          = "_";
-// work around strings
-// TODO: since we have this string, should this file be named as general "css.h" ?
-const char * const WEBKIT_ONLY         = "@media screen and (-webkit-min-device-pixel-ratio:0)";
-const char * const PRINT_ONLY          = "@media print";
-
-
-// TODO: better names, remove collission (i.e LINE_CN vs LETTER_SPACE_CN)
-const char * const LINE_CN             = "l";
-const char * const TRANSFORM_MATRIX_CN = "t";
-
-// page_decoration is for shadow etc
-// page_frame cannot have margin or border-width, pdf2htmlEX.js will use it to determine the coordinates
-// page_content holds everything inside the page, could be hidden to speed up rendering
-// page_data holds data for pdf2htmlEX.js
-const char * const PAGE_DECORATION_CN  = "d";
-const char * const PAGE_FRAME_CN       = "p";
-const char * const PAGE_CONTENT_BOX_CN = "b";
-const char * const PAGE_DATA_CN        = "j";
-
-const char * const FONT_NAME_CN        = "f";
-const char * const FONT_SIZE_CN        = "s";
-const char * const FILL_COLOR_CN       = "c";
-const char * const STROKE_COLOR_CN     = "C";
-const char * const LETTER_SPACE_CN     = "l";
-const char * const WORD_SPACE_CN       = "w";
-const char * const RISE_CN             = "r";
-const char * const WHITESPACE_CN       = "_";
-const char * const LEFT_CN             = "L";
-const char * const HEIGHT_CN           = "h";
-const char * const WIDTH_CN            = "W";
-const char * const BOTTOM_CN           = "B";
-
-const char * const CSS_DRAW_CN         = "Cd";
-const char * const LINK_CN             = "a";
-
-}
-}
-
-
-#endif //CSSCLASSNAMES_H__
diff --git a/src/util/StateManager.h b/src/util/StateManager.h
index cc6b98d..e9415ee 100644
--- a/src/util/StateManager.h
+++ b/src/util/StateManager.h
@@ -14,7 +14,7 @@
 #include <unordered_map>
 
 #include "util/math.h"
-#include "util/CSSClassNames.h"
+#include "util/css_const.h"
 
 namespace pdf2htmlEX {
 
diff --git a/src/util/css_const.h.in b/src/util/css_const.h.in
new file mode 100644
index 0000000..0e14e2c
--- /dev/null
+++ b/src/util/css_const.h.in
@@ -0,0 +1,58 @@
+/*
+ * css_const.h
+ *
+ * Copyright (C) 2013 Lu Wang <coolwanglu@gmail.com>
+ */
+
+#ifndef CSS_CONST_H__
+#define CSS_CONST_H__
+
+
+/*
+ * should be consistent with base.css and pdf2htmlEX.js
+ */
+
+namespace pdf2htmlEX {
+namespace CSS {
+
+// work around strings
+const char * const WEBKIT_ONLY         = "@media screen and (-webkit-min-device-pixel-ratio:0)";
+const char * const PRINT_ONLY          = "@media print";
+
+// usually the class name is XXX_CN or XXX_CN<hex id>
+// sometimes we need a special one, e.g. transparent color, where the id is -1
+const char * const INVALID_ID          = "@CSS_INVALID_ID";
+
+const char * const LINE_CN             = "@CSS_LINE_CN@";
+const char * const TRANSFORM_MATRIX_CN = "@CSS_TRANSFORM_MATRIX_CN@";
+
+// page_decoration is for shadow etc
+// page_frame cannot have margin or border-width, pdf2htmlEX.js will use it to determine the coordinates
+// page_content holds everything inside the page, could be hidden to speed up rendering
+// page_data holds data for pdf2htmlEX.js
+const char * const PAGE_DECORATION_CN  = "@CSS_PAGE_DECORATION_CN@";
+const char * const PAGE_FRAME_CN       = "@CSS_PAGE_FRAME_CN@";
+const char * const PAGE_CONTENT_BOX_CN = "@CSS_PAGE_CONTENT_BOX_CN@";
+const char * const PAGE_DATA_CN        = "@CSS_PAGE_DATA_CN@";
+
+const char * const FONT_NAME_CN        = "@CSS_FONT_NAME_CN@";
+const char * const FONT_SIZE_CN        = "@CSS_FONT_SIZE_CN@";
+const char * const FILL_COLOR_CN       = "@CSS_FILL_COLOR_CN@";
+const char * const STROKE_COLOR_CN     = "@CSS_STROKE_COLOR_CN@";
+const char * const LETTER_SPACE_CN     = "@CSS_LETTER_SPACE_CN@";
+const char * const WORD_SPACE_CN       = "@CSS_WORD_SPACE_CN@";
+const char * const RISE_CN             = "@CSS_RISE_CN@";
+const char * const WHITESPACE_CN       = "@CSS_WHITESPACE_CN@";
+const char * const LEFT_CN             = "@CSS_LEFT_CN@";
+const char * const HEIGHT_CN           = "@CSS_HEIGHT_CN@";
+const char * const WIDTH_CN            = "@CSS_WIDTH_CN@";
+const char * const BOTTOM_CN           = "@CSS_BOTTTOM_CN@";
+
+const char * const CSS_DRAW_CN         = "@CSS_CSS_DRAW_CN@";
+const char * const LINK_CN             = "@CSS_LINE_CN@";
+
+}
+}
+
+
+#endif //CSS_CONST_H__