2nd Practice: Retina Morning Post
100 個練習計畫:第二個練習

第二個目標

練習報紙排版。

遇到困難

分散對齊

首先遇到的問題就是要讓文字分散對齊,原本以為用 text-align: justify; 可以解決,結果才發現這只能用在超過一行的文字上哭哭。

然後查到一個 jQuery 解法如下,我大概理解原理,但細節還待研究。簡單來說就是算每個字元平均要佔該 div 多少 width 來作分散對齊。

$.fn.strech_text = function(){
    var elmt = $(this),
    cont_width = elmt.width(),
    txt = elmt.html(),
    one_line = $('' + txt + ''),
    nb_char = elmt.text().length,
    spacing = cont_width/nb_char,
    txt_width;

    elmt.html(one_line);
    txt_width = one_line.width();

    if (txt_width < cont_width){
        var char_width = txt_width/nb_char,
        ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char;

        one_line.css({'letter-spacing': ltr_spacing});
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};

$(document).ready(function () {
    $('.stretch').each(function(){
        $(this).strech_text();
    });
});

然後幫各 div 設定 class="stretch",並且一定要設定 width 才能算。

水平向下對齊

然後碰到第二個問題是水平的欄位如何向下對齊,其實後來查了一下。這個問題好像並不應該很難,只能說我觀念不夠清晰。

總之解決的辦法是針對包住水平欄位的 container 設定 position: relative;,然後各欄位設定 position: absolute;,再用 toprightbottomleft 去調位置就可以了。

positionabsoluterelative 好難懂 R 囧>

分隔線加粗

好,這其實不算問題,只是我忘了加粗的敘述去 google 發現了一種可以相容舊 IE 的方法,藉此作個紀錄,如下:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

縱排文字

這本來是我認為這個 project 最難的部分,結果 google 到好幾種做法,其中一種解法我覺得超級天才!是開發商 cmonos 作的 taketori-js,還開源!

先用 CSS 的 transform 把整個 block 轉 +90 度,然後偵測裡面的漢字分別用 span 包起來轉 -90 度,再處理斷行與標點等等。這個解法真的太強,實用!

Github 開源:TAKETORI-JS

感想

切版真的麻煩,而且我還沒做適應手機大小的版本,不過考慮到這是舊報紙版型,沒有也很正常對吧?(其實只是懶)


Last modified on 2017-09-15