天|本|化|范|码|首|
找|来|,|,|比|先|
不|打|并|我|较|说|
到|算|适|只|乱|明|
了|贴|配|做|,|,|
,|原|了|了|且|原|
只|作|下|相|不|作|
好|者|移|应|遵|者|
放|链|动|界|守|不|
弃|接|设|面|h|是|
~|的|备|上|t|我|
|,|。|的|m|,|
|找| |修|l|原|
|了| |改|5|先|
|半| |优|规|代|
以下代码保存成单 .html 文件即可
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" cOntent="width=device-width, initial-scale=1.0">
<title>竖排文字转换器 古典中文排版工具</title>
<style>
body {
font-family: Arial, sans-serif;
/* 设置默认字体 */
line-height: 1.6;
/* 设置默认行高 */
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
/* 设置页面最大宽度 */
margin: 0 auto;
/* 居中显示 */
padding: 20px;
}
.textarea-container {
width: 100%;
margin-bottom: 10px;
}
textarea {
width: 100%;
min-height: 150px;
padding: 10px;
background-color: #F5F5F5;
font-size: 14px;
line-height: 1.4;
border: 1px solid #ccc;
box-sizing: border-box;
/* 让 padding 不会增加元素宽度 */
resize: vertical;
/* 垂直方向可拖动调整大小 */
}
.input-group {
margin-bottom: 10px;
}
.input-group label {
margin-right: 10px;
}
@
media (max-width: 600px) {
.container {
padding: 10px;
}
textarea {
min-height: 100px;
}
}
</style>
<script>
var S = "\n\n\n ";
var str = "";
var strGB = "皑蔼碍爱肮袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙币痹闭边编贬变辩辫标鳖别瘪濒滨宾摈饼并拨钵铂驳补财采参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋迟驰耻齿炽冲宠畴踌筹绸橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑蹿窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔颠点垫电淀钓调谍叠钉顶锭订丢东动栋冻犊独读赌镀锻断缎兑队对吨顿钝夺堕鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦贩饭访纺飞诽废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖赶秆赣冈刚钢纲岗镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规归龟闺轨诡柜贵刽辊滚锅国过骇韩汉号阂鹤贺横恒轰鸿红壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑获货祸击机积饥迹讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检碱硷拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧将浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较阶节洁结诫届紧锦仅谨进晋烬尽劲荆茎鲸惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢觉决诀绝钧军骏开凯颗壳课垦恳抠库裤块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜谰揽览懒缆烂滥捞劳涝乐镭垒类泪篱离里鲤礼丽厉励砾历沥隶俩联莲连镰怜涟敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸么没镁门闷们锰梦眯谜弥觅幂绵缅庙灭悯闽鸣铭谬谋亩呐钠纳难挠脑恼闹馁内拟腻撵酿鸟聂啮镊镍柠狞宁拧泞钮纽脓浓农疟诺欧鸥殴呕沤盘庞抛赔喷鹏骗飘频贫苹凭评泼颇铺谱栖凄脐齐骑岂启气弃讫牵铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲寝轻氢倾顷请庆琼穷趋区躯驱龋颧权劝却鹊确让饶扰绕热韧认纫荣绒软锐闰润萨鳃赛叁伞丧骚扫涩杀刹纱筛删闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗时蚀实识驶势适释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲松耸怂颂讼诵擞苏诉肃虽随绥岁孙损笋缩琐锁獭挞态摊贪瘫滩坛谭谈叹汤烫涛绦讨腾誊锑题体屉条贴铁厅听烃铜统头秃图团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问挝蜗涡窝卧呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦吓鲜纤贤衔闲显险现献县馅羡宪线厢镶乡详响项萧嚣销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许叙绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎艳厌砚彦谚验鸯杨扬疡阳养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪蚁艺亿忆义诣议谊译异绎荫阴银饮隐樱婴鹰应缨莹萤营荧蝇赢颖哟拥痈踊咏优忧邮铀犹诱于舆鱼渔娱与屿语狱誉预驭鸳渊辕园员圆缘远愿约跃钥粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣责择则泽贼赠轧铡闸栅诈斋债毡盏斩辗崭栈占战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰争帧郑证织职执只纸挚掷帜质滞钟终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸驻专砖转赚桩装妆壮状锥赘坠缀谆着浊兹资渍踪综总纵邹诅组钻亘睾芈啬厍厣靥赝匦匮赜刭刿剀伛伥伧伫侪侬俦俨俪俣偾偬偻傥傧傩氽佥籴黉冁凫兖亵脔禀冢讦讧讪讴讵讷诂诃诋诏诒诓诔诖诘诙诜诟诠诤诨诩诮诰诳诶诹诼诿谀谂谄谇谌谏谑谒谔谕谖谙谛谘谝谟谠谡谥谧谪谫谮谯谲谳谵谶卺陉陧邝邬邺郏郐郓郦刍奂劢巯垩圹坜垆垭垲埘埚埙芗苈苋苌苁苎茏茑茔茕荛荜荞荟荠荦荥荩荪荭莳莴莅莸莺萦蒇蒉蒌蓦蓠蓣蔹蔺蕲薮藓奁尴扪抟挢掴掼揿摅搌撄撷撸撺弑叽呒呓呖呗咛哒哓哔哕哙哜哝唛唠唢啧啭喽喾嗫嗳辔嘤噜囵帏帱帻帼岖岘岚峄峤峥崂崃嵘嵛嵝巅徕犷狯狲猃猡猕饧饨饩饪饫饬饴饷饽馀馄馊馍馐馑馔庑赓廪忏怃怄忾怅怆怿恸恹恻恺恽悭惬愠愦懔闩闫闱闳闵闶闼闾阃阄阆阈阊阌阍阏阒阕阖阗阙阚沣沩泷泸泺泾浃浈浍浏浒浔涞涠渎渑渖渌溆滟滠滢滗潆潇潋潴濑灏骞迩迳逦屦弪妩妪妫姗娅娆娈娲娴婵媪嫒嫔嫱嬷驵驷驸驺驿驽骀骁骅骈骊骐骒骓骖骘骛骜骝骟骠骢骣骥骧纡纣纥纨纩纭纰纾绀绁绂绉绋绌绗绛绠绡绨绫绮绯绲缍绶绺绻绾缁缂缃缇缈缋缌缏缑缒缗缙缜缛缟缡缢缣缤缥缦缧缪缫缬缭缯缱缲缳缵玑玮珏珑顼玺珲琏瑷璎瓒韪韫韬杩枥枨枞枭栉栊栌栀栎柽桠桡桢桤桦桧栾棂椟椠椤椁榄榇榈榉槟槠樯橥橹橼檩殁殇殒殓殚殡轫轭轲轳轵轶轸轹轺轼轾辁辂辄辇辋辍辎辏辘辚戋戗戬瓯昙晔晖暧贲贳贶贻贽赀赅赆赈赉赇赕赙觇觊觋觌觎觏觐觑毵氇氩氲牍胧胪胄胫脍脶腽膑欤飑飒飓飕飙毂齑斓炀炜炖烨焖焘祢祯禅怼悫懑戆泶矶砀砗砺砻硖硗碛碜礴龛睐睑畲罴羁钆钇钋钊钌钍钏钐钔钗钕钛钜钣钤钫钪钭钬钯钰钲钴钶钸钹钺钼钽钿铄铈铉铊铋铌铍铎铐铑铒铕铖铗铙铛铟铠铢铤铥铧铨铪铩铫铮铯铳铴铵铷铹铼铽铿锂锆锇锉锊锒锓锔锕锖锛锞锟锢锩锬锱锲锴锶锷锸锼锾镂锵镆镉镌镏镒镓镔镖镗镘镙镛镞镟镝镡镤镦镧镨镪镫镬镯镱镳锺穑鸠鸢鸨鸩鸪鸫鸬鸲鸱鸶鸸鸷鸹鸺鸾鹁鹂鹄鹆鹇鹈鹉鹌鹎鹑鹕鹗鹞鹣鹦鹧鹨鹩鹪鹫鹬鹭鹳疖疠痨痫瘅瘗瘿瘾癞癫窦窭裆裢裣裥褛褴皲耧聍聩顸颀颃颉颌颏颔颚颛颞颟颡颢颦虬虮虿蚬蛎蛏蛱蛲蛳蛴蝈蝾蝼蠼罂笃笕笾筚筝箦箧箨箪箫篑簖籁舣舻袅羟糁絷麸趱酽酾鹾趸跄跞跷跸跹跻踬踯蹑蹒蹰躏躜觞觯靓雳霁霭龀龃龅龆龇龈龉龊龌黾鼋鼍隽雠銮錾鱿鲂鲅鲈稣鲋鲎鲐鲒鲔鲕鲚鲛鲞鲟鲠鲡鲢鲣鲥鲦鲧鲨鲩鲫鲭鲮鲰鲱鲲鲳鲵鲶鲷鲻鲽鳄鳅鳆鳇鳌鳍鳎鳏鳐鳓鳔鳕鳗鳜鳝鳟鳢鞑鞯鹘髅髋髌魇魉飨餍鬓麽黩黪鼹";
var strBIG5 = "三於著汆";
var keyCode = new Array(32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 58, 59, 60, 61, 62, 63, 64, 91, 92, 93, 94, 95, 96, 123, 124, 125, 126, 65306, 12298, 12299, 12296, 12297, 8216, 8217, 8220, 8221, 65288, 65289, 65339, 65341, 65371, 65373, 8212, 8230);
var keyTrans = new Array(" ", "!", "″", "#", "$", "%", "&", "′", "", "", "*", "+", ",", "-", "", "/", "", ";", "", "=", "", "?", "@", "", "", "", "^", "_", "", "", "|", "", "~", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "┃", "┆");
var keyMap = new Array();
for (i = 0; i < keyCode.length; i++)
keyMap[keyCode[i]] = keyTrans[i];
var hanziMap = new Array();
for (i = 0; i < strGB.length; i++)
hanziMap[strGB.charCodeAt(i)] = strBIG5.charAt(i);
function h() {
var ws = parseInt(document.getElementById("iH").value);
var H = parseInt(document.getElementById("iW").value);
var sp = document.getElementById("iS").value;
var SS = new Array();
var vx = document.getElementById("srcText").value;
var t = "";
for (var x = 0; x < vx.length; x++) {
var xCode = vx.charCodeAt(x);
if (xCode == 9 || xCode == 13)
continue;
if (xCode == 10) {
SS[SS.length] = t;
t = "";
}
else {
if (t.length >= ws) {
SS[SS.length] = t;
t = "";
}
if (xCode >= 65 && xCode <= 90)
t = t + String.fromCharCode(65313 + xCode - 65);
else if (xCode >= 97 && xCode <= 122)
t = t + String.fromCharCode(65345 + xCode - 97);
else if (xCode >= 48 && xCode <= 57)
t = t + String.fromCharCode(65296 + xCode - 48);
else if (keyMap[xCode] != null)
t = t + keyMap[xCode];
else if (document.getElementById("iscbig5checkbox").checked == true) {
if (hanziMap[xCode] != null)
t = t + hanziMap[xCode];
else
t = t + vx.charAt(x);
}
else
t = t + vx.charAt(x);
}
}
SS[SS.length] = t;
var v1 = SS.length % H;
if (v1 != 0) {
for (var x = v1; x < H; x++)
SS[SS.length] = "";
}
str = " ";
var p1 = 0;
var ll = SS.length;
while (p1 < ll) {
var p2 = p1 + H - 1 < ll ? p1 + H - 1 : ll - 1;
for (var y = 0; y < ws; y++) {
for (var x = p2; x >= p1; x--) {
if (SS[x].length > y) {
if (SS[x].charCodeAt(y) > 127)
str = str + SS[x].charAt(y) + sp;
else
str = str + SS[x].charAt(y) + " " + sp;
}
else {
str = str + " " + sp;
}
}
str = str + "\n ";
}
str = str + S;
p1 = p2 + 1;
}
document.getElementById("tarText").value = str;
}
function copyText() {
var textArea = document.getElementById("tarText");
textArea.select();
textArea.setSelectionRange(0, 99999);
document.execCommand("copy");
}
</script>
</head>
<body>
<div class="container">
<div class="title">
<h1>文字竖排转换器</h1>
</div>
<div class="textarea-container">
<textarea id="srcText" name="s1" placeholder="请输入要转换的文字..." rows="10"></textarea>
</div>
<div class="input-group">
<label for="iS">分隔符:</label>
<input type="text" id="iS" name="T1" value="|" size="3" maxlength="10">
<labe for="iW">页宽:</label>
<input type="number" id="iW" name="T2" value="6" size="3">
<label for="iH">页高:</label>
<input type="number" id="iH" name="T3" value="15" size="3">
</div>
<div class="input-group">
<label>繁体</label>
<input type="checkbox" id="iscbig5checkbox">
<button style="width: 90px; height: 30px;" Onclick="h()">转换</button>
<button style="width: 90px; height: 30px;" Onclick="copyText()">复制</button>
<button style="width: 90px; height: 30px;" Onclick="document.getElementById('srcText').value=''">清除</button>
</div>
<div class="textarea-container">
<textarea id="tarText" name="s2" placeholder="转换后的文字将显示在这里..." rows="10" readonly></textarea>
</div>
<div>
<p><b>使用说明:</b><br>一个仿古书排版样式的文字竖排工具。在上面的文本框输入一段文字,点击转换按钮即可在下方看到输出的样式。</p>
<p>在使用本工具时,可以设置一些条件以改变输出样式:<br>
<span style="color:#0066ff">分隔字符</span>:输出样式中用于分隔竖排文字的字符,可以随意使用任何字符。同时,你还可以使用多个字符来分隔。<br>
<span style="color:#0066ff">页宽</span>:设置文字竖排的列数。<br>
<span style="color:#0066ff">页高</span>:设置文字竖排的列高字符数。<br>
<span style="color:#0066ff">繁体</span>:将简体汉字转换成繁体汉字输出。
</p>
<p><b>提示:</b><br>灵活设置分隔字符、页宽和页高,会有意想不到的效果哦!</p>
</div>
</div>
</body>
</html>