Textwellで原稿用紙ライクなプレビューを!「原稿用紙」
何だかんだで原稿用紙の使用頻度が高い今日この頃。
Textwellで下書きをし、縦書きプレビューでパパッと確認といった塩梅ですが、どうしても手作業での整形が必要で面倒…
というわけで、今回は原稿用紙っぽい感じで整形してくれるアクションを作ってみましたー
修正:2013年12月20日
すみません、登録リンクが変なことになってました。
どこで間違ったのかしら・・・?
どうも、@chiroru_27 です。
今回はTextwellで原稿用紙っぽいプレビューが出来るアクションを作ってみましたよー
手書きなら何も考えずに出来る禁則処理も、いざ作るとなるとなかなかに面倒ですね…
まぁ説明が必要なアクションでもないので、パパッとご紹介に移りますか。
原稿用紙
「原稿用紙」登録はこちら!例えばこの作品。私の大好きな福沢諭吉の学問のすゝめ。
これがアクションを使うと、こんな感じに。
グリッドもなければ編集機能もない。
禁則処理も簡単なものくらいしか対応出来ていませんが、それっぽい雰囲気は出せたのでおkとしましょう。
原稿に合うようにいくつか設定も出来るようになっています。変更はソースを直接いじって下さいね〜。
// 機能 : 原稿用紙のサイズ指定 // 引数 : column 字数 // 引数 : row 列数 SetManuscript.SIZE(column, row); // 機能 : 自動整形の設定 // 引数 : option 1,2列目を題名、名前として処理する。(true/falseで指定) // 引数 : level 禁則処理のレベル。2で段落先頭の「を字上げする。(任意) SetManuscript.FORMATTING(option, level);
やっぱり日本語は縦書きがいい。
読みやすいし、美しい。なにより、これで作業がぐっと楽になりました!原稿用紙ライクなプレビューアクション、お気に入り決定です♪
「原稿用紙」登録はこちら!
以上、@chiroru_27 でした!
ソース
<html> <head> <title></title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <style> html { direction: ltr; line-height: 1.5; -webkit-writing-mode: vertical-rl; -webkit-text-size-adjust: 100%; } pre { height: 80%; margin: auto 50px; font-family: Hiragino Kaku Gothic ProN; font-size: x-large; } </style> </head> <body> <script> var text = T.text; text = text.replace(/ /g, " ").replace(/\(/g, "(").replace(/\)/g, ")").replace(/\!/g, "!").replace(/\?/g, "?"); var JP_Hyphenation = [ "、", "。", "「", "」", "(", ")", "ー", "〜", "ぁ", "ぃ", "ぅ", "ぇ", "ぉ", "っ", "ゃ", "ゅ", "ょ", "ァ", "ィ", "ゥ", "ェ", "ォ", "ッ", "ャ", "ュ", "ョ" ]; var SetColumn = 20, SetRow = 20; var A_Formatting = { option : true, level : 1 }; var SetManuscript = { SIZE : function(column, row){ SetColumn = column; SetRow = row; }, FORMATTING : function(option, level){ A_Formatting.option = option, A_Formatting.level = level || 1; } }; var SortManuscript = { TITLE : function(text){ var SetText = " "+text.replace(/^\s*/, ""); return SetText; }, NAME : function(text){ var SetText = ""; for(var i = 0; i <= SetColumn; i++) SetText += " "; SetText += text+" "; SetText = SetText.slice(-SetColumn) return SetText; }, TEXT : function(text){ var Paragraph = text.split("\n"); var SetText = ""; if(A_Formatting.option == true){ // 題名と名前の自動整形 Paragraph[0] = SortManuscript.TITLE(Paragraph[0]); Paragraph[1] = SortManuscript.NAME(Paragraph[1]); } // 段落の処理 for(var i = 0; i < Paragraph.length; i++){ if(A_Formatting.level >= 2){ // 段落先頭が"「"の場合の字上げ処理(level.2) - 初期値は無効 var StartLine = (A_Formatting.option == true) ? 2 : 0; if(i >= StartLine && Paragraph[i].match(/^「/) != null) Paragraph[i] = Paragraph[i].replace(/^\s/, ""); else Paragraph[i] = " "+Paragraph[i].replace(/^\s/, ""); } else Paragraph[i] = " "+Paragraph[i].replace(/^\s/, ""); // 段落毎の処理 for(var j = 0; j < Paragraph[i].length; j = j+SetColumn){ // 行中に"。」"がある場合の整形処理 var SetCount = Paragraph[i].substring(j, j+SetColumn).split("。」").length-1; SetText += Paragraph[i].substring(j, j+SetColumn+SetCount); if(SetCount > 0) j = j+SetCount; // 行頭に"々"がある場合の整形処理 if(Paragraph[i].substring(j, j+1).match(/々/)) SetText = SetText.replace(/\n々/, "\n"+Paragraph[i].substring(j-1, j)); // 行末の禁則処理 if(JP_Hyphenation.indexOf(Paragraph[i].substring(j+SetColumn, j+(SetColumn+1))) >= 0){ if(JP_Hyphenation.indexOf(Paragraph[i].substring(j+(SetColumn+1), j+(SetColumn+2))) >= 0){ SetText += Paragraph[i].substring(j+SetColumn, j+(SetColumn+2)); j = j+2; } else { SetText += Paragraph[i].substring(j+SetColumn, j+(SetColumn+1)); j++; } } // 原稿の形に配置 SetText += "\n"; } } return SetText; } }; SetManuscript.SIZE(20,20); // 原稿用紙のサイズ指定 - 初期値は20x20の400字詰め SetManuscript.FORMATTING(true); // 自動整形の設定 - 初期値は題名と名前の自動整形オンのlevel.1 document.write('<pre id="Manuscript"><div>'+ SortManuscript.TEXT(text) +'</div></pre>'); document.title = SetColumn +"x"+ SetRow + " | " + "Line:" + (document.getElementById("Manuscript").innerText.split("\n").length - 1) + " | " + "Page:" + Math.ceil(document.getElementById("Manuscript").innerText.split("\n").length / (SetRow / 2)); window.scroll(0,0); T.closelets([ {title: "原稿形式で保存する", fn: function(){ var textAll = document.getElementById("Manuscript").innerText; T("replace" , {text: textAll}) } } ]); </script> </body> </html>