I have been updating my blog since last year. To make the content more readable, I manually edit the html/css source code. I modified the template of my blog to add some css rules which can be used repetitively in my blog posts. This saves lots of duplicate typing work. However, it is still a painful task to edit the html/css source code in google blotspot. No syntax highlight, so small a area where edit takes place, manually html escape ... Of course, I can first edit the html/css code in an external editor (notepad, ultraedit...) and then copy and paste the code. But, what is important to me is the pure content of the blog posts. In other words, the decoration and formatting of the content should take as little time as possible. So, I prefer to use rich text editor in which formatting of text/image... can be controlled conveniently. In addition, the editor must have the ability to convert the rich text into html/css format. In my case, I chose MS Word because I can get it easily. Now, I can edit my document in MS Word which I am familiar with and then convert the document into html. But, one problem pops up now. The converted html document contains css
<style></style> section in
head section which contains various css rules. I CANNOT copy and paste the document directly into google blogspot because the
<style> element CANNOT be defined in
bodysection. What I type in the text area(blogspot editing) is finally put into
body section of the final web page by google server. So, I thought of changing the css rules into inline mode by using the style attribute.
Originally:
<html>
<head>
<style>
.css{
color:blue;
}
</style>
</head>
<body>
<div class=\"css\">test text</div>
</body>
</html>
:
<html>
<head> </head>
<body>
<div style=\"color:blue;\">test text</div>
</body>
</html>
If all the work is done manually, I believe it is a test of one's patience and carefulness. As a computer major student, I would like it to be done programmatically. I need a CSS parser to parse the css rules and know which element refers to which css rule. After that, the remaining work is just to insert the css rules into corresponding places.
After searching in Google, I found
W3 Simple API for CSS and
Cypress.
SAC is a standard interface for CSS parser and supposed to work with CSS1, CSS2, CSS3 (currently under development) and other CSS derived languages.
Cypress is an open source CSS parser.
Actually, at first I checked well-known layout engines -
Mozilla Gecko, Trident,
WebCore(currently
WebKit). But I did not find an independent css parsing module in those engines.
Now, I decide to use
Cypress to write a simple program to do the work I mentioned above.
Posts
No comments:
Post a Comment