#chiroruLab

趣味と日々の雑記録

少し「縦書きプレビュー」を調整。今度はタイトルを指定出来ます。

何かを書くなら、余計な要素はない方がいいかも。
そんな訳で、タイトルも指定できるようにして変更しました。
他にもいくつか微調整を。

縦書きプレビュー ver2.5

更新内容

## 更新内容
2013年10月24日 - ver2.5

  • タイトルを指定出来るようにしました。
    • 30字以上の場合は、末尾に「...」が付きます。
    • それに合わせてプレビュー範囲を全体にしました。
  • フォントなど数カ所の微調整

わかっている問題

行の最初でペースト・コピーなどのメニューが出ない。

2画面化アクション「DualWindow」で一応の解決方法はわかっているのですが、表示の都合上そのままにしてあります。
解決方法は以下の通りです。

preの上、左右にある程度の余白を設定する。
例:)
margin: 55px 30px 0; など
またはpaddingをつかって、 padding: 35px 30px 0;など

ただこの解決方法では編集中の一行あたりの情報量が少なくなる問題が出てきます。

入力中画面の向きを変更するとテキストが入りきらなくなる

これは全バージョンから共通のものですね。現在の解決策としては以下の方法があります。

以下は方法は全て、キーボードを閉じた状態で行って下さい。

  • 通知センターをちょっと出して引っ込める。
  • コントロールセンターをちょっと出して引っ込める。
  • マルチタスク用ジェスチャを少しでも使う
    • 5本指でちょっとだけピンチして戻す
    • 4本指で横にちょっとだけスワイプして戻す
    • 4本指で上にスワイプしてマルチタスクを開いて戻す

”ちょっと””ちょっと”と何度も言ってますが、普通にやって戻すでも大丈夫です。
つまり、システムイベントを少しでも噛ませればいい訳です。
そうすると表示がリセットされ、正しい表示が再適用されます。
入力編集内容については変更されないので安心して下さい。

ソース

>>登録はこちら。

<html>
 <head>
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <style>
   html {
    direction: ltr;
    -webkit-writing-mode: vertical-rl;
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    text-align: justify;
   }
   pre {
    margin: 15px 30px;
    font-family: Hiragino Kaku Gothic ProN;
    font-size: x-large;
   }
  </style>
 </head>
 <body>
  <script>
   document.title = (T.selectedText != "")
                  ? (T.selectedText.length >= 30 && T.selectedText.match(/(^.{30})/))
                   ? RegExp.$1+"..."
                   : T.selectedText
                  : "縦書きプレビュー";
   
   document.write( "<pre><div>\n"+ T.text +"</div></pre>" );
   document.body.contentEditable=true;
   
   window.scroll(0,0);
   T.closelets([
    {title: "変更を保存して閉じる",
     fn: function(){
      var textAll = document.body.innerText.replace(/^\n/ , "");
      T("replace" , {text: textAll})
     }
    }
   ]);
  </script>
 </body>
</html>