Time went reincarnation. 2 days ago
还有板凳! June 28, 2016

近日,cPlayer Rewrite已经完成。cPlayer Rewrite是由Corps制作的一款HTML5 Audio Player,其延续自cPlayer,并且更加轻快简洁,速度也有了极大的提升。

沙发可用! April 10, 2016

没想到Mactype竟然会有这问题...
没想到上次Windows10升级蓝屏是这原因...


3 条评论 April 6, 2016

之前写某配对关键词函数时候,使用了一个函数"shuffle",当时未曾多想.今天乘着有闲,便来尝试着解析一番

16 条评论 January 31, 2016

首先,我作出声明,这并不是我蛋疼无聊写出来的,我写这些玩意儿是有苦衷的<black>(白痴不会玩插件呗)<black>

我是说,现在市面上的AJAX COMMENTS貌似都不支持我的主题呢,于是就自己写了一下后台输出评论JSON(短)和前台AJAX获取→输出的JS代码(短).

嗯见笑了<black>吔我大Ctrl+C / Ctrl+V啦~</black>

PHP是初一下学期结尾做的,Javascript是2016/1/20-22(大致范围)做的。
嗯嗯

PHP code:

取数据库,函数(in function.php,耗时5天<上学期间>):

function getComments($cid){
    $db = Typecho_Db::get();
    $select = $db->select('table.comments.*')
              ->from('table.comments')
              ->where('table.comments.cid = ?', $cid)
              ->order('table.comments.cid', Typecho_Db::SORT_ASC);
    $result = $db->fetchAll($select);
    foreach($result as $key => $value){
        $result[$key]['ip'] = '';
        $result[$key]['mail'] = md5($result[$key]['mail']);
        $result[$key]['author'] = preg_replace('/\s*(.*)/','$1',$result[$key]['author']);
    }
    return $result;
}

输出JSON(comments_get.php,耗时一天<上学期间>):

<?php
header('Content-Type:text/json; charset=UTF-8');
include('../../../config.inc.php');
include('functions.php');

if(!is_numeric($_GET['cid'])){
    die('无效请求.');
}else{
    $comments = getComments($_GET['cid']);
    $comments_json = json_encode($comments);
    if(isset($_GET['jsonp'])){
        if(isset($_GET['callback'])){
            echo $_GET['callback'] . '(' . $comments_json . ');';
        }else{
            echo 'corpsComments(' . $comments_json . ');';
        };
    }else{
        echo $comments_json;
    };
};


?>

Javascript(纯JS,无jQuery,耗时一个下午<寒假>):

function loadComments(cid){
    var x = new XMLHttpRequest;
    x.addEventListener("readystatechange", function(){
        if(x.readyState==4 && x.status==200){
            var json = eval("("+x.response+")");
            var commentList = document.createElement("ol");
            commentList.classList.add("comment-list");

            for (var i = 0; i < json.length; i++) {
                var commentBody = document.createElement("li");
                commentBody.classList.add("comment-body");
                if(json[i].parent == 0){
                    commentBody.classList.add("comment-parent");
                }else{
                    commentBody.classList.add("comment-child");
                }
                if(json[i].authorId == 1) commentBody.classList.add("comment-by-author");
                commentBody.setAttribute("itemscope","");
                commentBody.setAttribute("itemtype", "http://schema.org/UserComments");
                commentBody.id = "comment-" + json[i].coid;

                var commentAuthor = document.createElement("div");
                commentAuthor.classList.add("comment-author");
                commentAuthor.setAttribute("itemscope", "");
                commentAuthor.setAttribute("itemtype", "http://schema.org/Person");
                commentAuthor.setAttribute("itemprop", "creator");
                commentAuthor.innerHTML = '<span itemprop="image"><img class="avatar" src="https://secure.gravatar.com/avatar/'+ json[i].mail +'?s=32&amp;r=G&amp;d=" alt="'+json[i].author+'" width="32" height="32"/></span><cite class="fn" itemprop="name"><a href="'+json[i].url+'" rel="external nofollow">'+json[i].author+'</a></cite>';
                commentBody.appendChild(commentAuthor);

                var commentMeta = document.createElement("div");
                commentMeta.classList.add("comment-meta");
                commentMeta.innerHTML = '<a href="http://corps.set-fire.com/archives/'+ json[i].cid +'/#comment-'+json[i].coid+'"><time itemprop="commentTime" datetime="'+(new Date(parseInt(json[i].created+"000"))).toISOString()+'">'+(new Date(parseInt(json[i].created+"000"))).toLocaleString()+'</time></a>';
                commentBody.appendChild(commentMeta);

                var commentText = document.createElement("div");
                commentText.classList.add("comment-content");
                commentText.innerHTML = "<p>"+json[i].text+"</p>";
                commentBody.appendChild(commentText);

                commentBody.innerHTML += '<div class="comment-reply"><a href="http://corps.set-fire.com/archives/'+ json[i].cid +'/?replyTo='+ json[i].coid +'#respond-post-'+ json[i].cid +'" rel="nofollow" onclick="return TypechoComment.reply(\'comment-'+ json[i].coid +'\', '+ json[i].coid +');"><button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">textsms</i></button></a></div>';

                //然后就是录入

                if(json[i].parent != 0){
                    if(commentList.querySelector("#comment-"+json[i].parent).getElementsByClassName("comment-list")[0] === undefined){
                        var commentChildren = document.createElement("div");
                        commentChildren.classList.add("comment-children");
                        commentChildren.setAttribute("itemprop", "discusses");
                        var childrenList = document.createElement("ol");
                        childrenList.classList.add("comment-list");
                        childrenList.appendChild(commentBody);
                        commentChildren.appendChild(childrenList);
                        commentList.querySelector("#comment-"+json[i].parent).appendChild(commentChildren);
                    }else{varchildrenList = commentList.querySelector("#comment-"+json[i].parent) .getElementsByClassName("comment-list") [0];childrenList.appendChild(commentBody);} }else{
                    commentList.appendChild(commentBody);
                }
            };
            if(document.getElementsByClassName("comment-list")[0] !==undefined){
                document.getElementsByClassName("comment-list")[0].parentNode.removeChild(document.getElementsByClassName("comment-list")[0]);
            }
            document.getElementsByClassName("comments")[0].insertBefore(commentList,document.getElementsByClassName("comments")[0].children[0]);
        }
    });
    x.open("GET","/usr/themes/MDBlog/comments_get.php?cid="+cid,true);
    x.send();
}

<style>
black {
display: inline;
background: black !important;
color: black !important;
}
black::selection {
color: white !important;
}
</style>

6 条评论 November 21, 2015

电脑辅助的设计中,一般人可以轻易的凸显任何内文。只要透过 word 等基本文书编辑软件内的 i, B, U 等按钮,或任意改变文字颜色,就可以达到基本的强调。但是,这些设定对读者而言,究竟是干扰还是助益?过去数百年的排版惯例又可以告诉我们哪些实用而合理的规则?

写在前面:如果‧‧‧‧‧‧

如果什么都强调了,就等于什么都没有强调。

强调最好是一个字、一组词就好,非必要请勿使用。过多的强调法使用,其实等于没有强调。认识到这个最基本的前提我们再谈谈不理想的强调法。

不理想的强调法:底线、假粗体与假斜体

除了要特别讨论的上色之外,最常用的强调法不外乎“加粗”、“变斜”或是“加底线”。加粗、变斜是透过墨色浓度或形状变化与正文对比,这发源自西方数百年的排版规则;加底线则是打字机盛行之后留下的遗产。

避免用底线强调

在中西方的排版规则里,从来没有发生过加底线来强调的情况。底线是打字机留下的遗产。

打字机上并没有其他变化,只能装正文,无法变化成斜体、粗体。所以就产生了底线设计,补足没有强调法的缺陷。

但是我们可以来看一下,底线真的是有效的强调法吗?底线加上去到底比较接近干扰还是强调呢?相信大家可以透过这段文字看出来,底线强调法会让底线抢走字本身的风采,让我们注意线多过于文字。

不论对中英文而言,底线都并非理想的强调法。专业的设计师或排版工匠还是会告诉你,最好使用正统的强调法:粗体 (bold)、斜体 (italic)等等。(这里特别是就西文而言)

补充:但是就网页而言,底线变成了标示超连结的一种惯例,是可以接受的。

相较于底线,以西方字母里的粗体、斜体强调,更能配合正文字体的设计。他们有相同的家族基因,例如相似的骨架、比例与风格,只是加粗了或变斜了。这样的特征让他们可以达到强调效果,但又不会太突兀,与正文不协调。

但其实多数人使用的粗体、斜体,其实都是“假”的。

避免用假粗体、假斜体

在 office 软件的设定中,i, B 两个按钮可以把任意字体变成斜体或粗体。如果一套字体里真的有粗体、斜体那倒不会有问题(例如微软正黑体有粗体);但是如果缺乏粗体、斜体,就会用程式演算出来一个替代的版本。这其实不是一个字体最天然的设计。

Corps:微软雅黑和微软正黑都有专门的粗体,文泉驿系列也是有的,当然强制加粗的字体之不协调感通过Mactype这类软件即可消除.

3859021454c83d94afd12a3b2018a50c[1].png

假的粗体都糊在一起;假的斜体则破坏了字体的结构与美感

这些假的斜体、粗体,看上去极不自然。因为人眼有许多细微的错视,每个字的形状也不同,若字的比例、粗细、曲线没有经过特殊调整,只是依照数学公式统一变形,看起来就会很不协调,甚至糊成一团,难以辨认。

电脑的方便常让人以为加粗或变斜只是一种特效。但在西文排版的历史中,斜体与粗体并不是特效,而是一种特殊字体。

理想强调法:粗体字型与斜体字型

在活版印刷时代,粗体(bold)斜体(italic),与正文字体(romans)其实是三种不同的字型(fonts)。这些不同的字型,其实都是基于不同的需求而设计出来的形态,而不是“加上去的特殊效果”。而且,这些概念都是西方来的,传统中文排版没有这三种字体的区别。

Corps:CSS的font-style(正体和斜体),和font-weight(粗体)即此

872803bda52df52ec834f6806fc8a28b[1].png
正确的粗体、斜体使用法

一点历史:为什么粗体、斜体不是一种特效

在西方的印刷中,一开始是古腾堡的 blackletter,视觉样貌很粗,跟现在的正文不一样。(现在 blackletter 变成一种装饰字体)后来到文艺复兴时期,才基于当时文人的手书字迹创造正文字体,也就是学名为罗马体(roman)的字体,目前存留最早的罗马印刷体是 1530 年在巴黎刻的 garamond。

b0c2ef0d66390d98177c8e4b58ef15ee_32a4a161e82a66a6c3437f4735d95379.jpg
Garamond 罗马体。原图出自这里

西文排版一开始只有罗马正文字体,而没有斜体。斜体是后来才发明的。斜体的英文学名是 italic,顾名思义,就是一个在意大利诞生的字体。比起正文罗马体,italic 比较接近草写、手书。手书所带来的天然歪斜是斜体的来源。

f69d0674d0b2ecb17e5bc1f8624a3be5[1].jpg

italic 是基于西方书法基础的字体,原图来自 wikimedia commons
一开始,斜体其实也当作正文字体。它不仅比罗马体更有人文气息,也更省印刷空间。只是久了以后人们开始发现斜体没有比罗马体好读,到了文艺复兴晚期,斜体就被用来与罗马体混搭,做特殊用途排版,例如强调。这个规则一直延续使用到现在。而粗体出现的时间更晚,是十九世纪的发明,也是设计来与正文对比的。

回到主题,拆开历史脉络后我们就可以了解,粗体与斜体也是一种字体样貌,不是按钮产生的的特效。

补充:在麦金塔电脑的 iWork 系列中,若电脑里缺乏字体的粗体字型或斜体字型,按 i 与 B 都不会产生任何效果。亦即,我们很难在用 iWork 生产的文件中看到斜体中文与几何加粗的中文内文。

附注:其实,西文排版里还有其他强调法的细节与历史,包含使用全部大写(allcaps)的强调法;italics、oblique 在中文都翻成斜体,但是有什么不一样呢?这些会写在稍后刊出的进阶版。

如果你想强调的是一整段

使用了真正的斜体、粗体,但是却没有善用它,那也是很可惜的。因为过度的强调等于没有强调,还会变成一种干扰。我们可以试举以下例子:

76759a6cc409d89b1e592215d84469ab[1].png
太多强调,其实就是没有强调
以上图片就是一个太多强调,等于没有强调的好例子。但也看得出来,想这么做的原因是希望告诉读者“这一段很重要喔”。传统的西文排版会用以下这种方式凸显一个重要的段落:

怎么强调一整个段落:

借由底色、边框与不同字体的变化,告诉读者这一段很重要,也帮助快速浏览掌握重点。

若使用颜色强调

对文字上颜色在活版印刷时代成本很高,因为要套两个颜色下去印。但是这个限制在喷墨打印机、雷射打印机,甚至萤幕阅读大行其道的现代就消失了,上色变成一种非常容易的事情。

但是就传统的排版规则来看,或是以正式文件的性质考量,上颜色是一件比较不合乎惯例的事情。不过除了正式的纸本文件以外,举凡网页、名片、贺卡或书籍,都可以合理地使用颜色强调。

中文部分:强调法稀少

接下来我们要谈一些中文排版的强调问题。

其实翻开古书刊本就可以发现,中文里没有显著的强调方式。最传统的,而且几乎能确定是唯一一种强调方式,是在文句旁边加上小圈圈。这个被称为“强调点”。也就是说,目前也常用的粗体、斜体设计,其实从是西方学来的排版规则。但是就使用上而言,并没有确立一套规矩。

b2a2901159c78cc270579d72e4de7474[1].jpg

传统的中文强调点(当然,中文强调点是直排的产物)

中文部分可行方案:使用不同字体强调

使用不同字体强调似乎是目前比较常见的方案。例如:

明体为主的内文中,使用黑体凸显差异。
但是这种做法很奇怪,黑体与明体其实很难搭配在内文,最好还是使用同一种样式的粗体。

文章转自JUSTFONT BLOG