中英混合字串長度計算

最近又要改版了,企劃那邊沒事提了個主意說想要圖檔「不規則排列」,大致就是長下面那張圖這樣:

�英混合�串長度計算

右邊那個圖檔出現的數目,跟左邊的標題長度成反比,反正就是要呈現一種「不規則的美感」啦!雖然「不規則」三個字對工程人員來講實在是沒有什麼美感可言,但是Anyway,我們的責任就是要把腦子想的東西轉換成真實呈現的東西。

討厭的是,這種中英混合的字串,在計算長度的時候實在是有其困難度,要算得很精準,是有點困難的,但是要騙騙人的眼睛,應該是還可以辦得到,以下就是我粗略寫出來的function。



function spShowListA($thingAry){  

   //定義所有變數,所有數值皆以pixel為單位  

  $allWidth   = 500; //區塊最大寬度  

  $picWidth   = 55;  //圖片區塊寬度(含margin)  

  $fontSize   = 12;  //事情標題字體大小(pixel計算)  

  $addSpace   = 30;  //所要加上的緩衝間距  

  $display    = '';//把每一項事情呈現的html標籤  

  $displayAry = array(); //包含所有事情的陣列  

  //開始計算所有所需數值  

  for($i=0;$i<sizeof($thingAry);$i++){  

    $strWidth = (mb_strwidth($thingAry[$i],'utf-8')*$fontSize/2) + $addSpace; 
    //字串大約的寬度(pixel)-含緩衝區  

    $picNums  = floor(($allWidth - $strWidth) / $picWidth);//取得容許的圖片張數  

    $display .= '<p style="font-size:12px; width: '.$strWidth.'px; clear:both; 
    background-color: #EEEEEE;">'.$thingAry[$i].'</p>';  

    $display .= '<div style="width:'.$allWidth.'px; height: 60px; 
    background-color: #000000;"><p style="font-size:12px; float:left; 
    color:#FFFFFF;">'.$thingAry[$i].'</p>';  

    for($j=0; $j<$picNums; $j++){  

    $display .= '<div style="margin-left: 5px; float:right; width:50px; 
    height: 50px; background-color: #666666;">圖片_'.$j.'</div>';  

    }  

  $display .= '</div>';  

  }  

  return $display;  

} 

這個function其實相當簡單,關鍵是在於使用 mb_strwidth()函式來計算多位元組字串的寬度,全形為2,半形為1。有人會覺得困擾,就算算出整個混合型態字串的寬度,又該怎麼判斷到底哪些字是全形,哪些字是半形?這的確有點麻煩,但是其實在這裡,我使用了偷懶的障眼法。

剛剛說過,我們的目的是為了騙人的眼睛。

既然寬度來講,全形為2,半形為1,那麼當字級為12px的時候,我可以假設全形的寬為12px,而半形的寬為6px;因此我只要將全半形的寬度總和乘上1/2的字級大小(注意,我這裡都是使用pixel為單位),就可以大概的計算出字串的寬度(單位為pixel),但是還是多少有一點落差,但只要加上一段緩衝的空間,就可以正確的呈現我想要的效果。

剩下的,就只是數學問題而已。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s