Created
October 7, 2010 11:30
-
-
Save think49/614981 to your computer and use it in GitHub Desktop.
setLineElementByBRElement.js : br要素区切りのノードを <span class="l"> で括る。大学ノート風のデザインを実現できる。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>setLineElementByBRElement.js</title> | |
| <style type="text/css"><!-- | |
| /* default */ | |
| body { margin: 0; padding: 1em; line-height: 100%; } | |
| h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #202020; } | |
| h1 { margin: 1em 0; padding: 0; font-size: 150%; } | |
| h2 { margin: 2.5em 0 1em; padding: 0; font-size: 120%; } | |
| h3 { margin: 1em 0; padding: 0; font-size: 100%; color: #373; } | |
| dl { margin: 1em 0; padding: 0; } | |
| dt { margin: 1.5em 1em 1em; padding: 0; color: #337; font-weight: bold; } | |
| dd { margin: 1em; padding: 0; } | |
| dt a { text-decoration: none; color: #337; } | |
| strong { font-size: 100%; font-weight: bold; } | |
| em { font-size: 100%; font-weight: normal; font-style: normal; text-decoration: underline; } | |
| blockquote { margin: 1em 2em; padding: 0.5em 1em; border: dashed 1px orange; } | |
| cite { font-family: italic; } | |
| pre { margin: 1.5em 2em; padding: 0.5em; font-family: monospace; font-size: 100%; font-weight: normal; } | |
| code { font-family: monospace; font-size: 90%; font-weight: normal; } | |
| hr { margin: 2em 0; padding: 0; } | |
| h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, th code { font-weight: bold; } | |
| table { border-collapse: collapse; table-layout: auto; margin: 1em 0; padding: 0; border: solid 1px #AAA; color: black; background-color: ghostwhite; } | |
| thead, tbody { margin: 0; padding: 0; border-style: none; } | |
| thead th { text-align: center; font-weight: bolder; color: #202020; background-color: lavender; } | |
| tbody th { text-align: left; font-weight: bolder; color: #202020; } | |
| th, td { margin: 0; padding: 0.5em 0.8em; border: solid 1px #AAA; } | |
| .button { display: inline-block; margin: 2px; padding: 1px; border: outset 2px #E9E9E9; color: black; background-color: #E9E9E9; } | |
| /* HTML5 */ | |
| mark, .mark { border-bottom: solid 4px #0c0; } | |
| /* notebook */ | |
| .notebook { margin: 1em 0; padding: 1em; border: solid 1px #999; } | |
| --></style> | |
| <style type="text/css"><!-- | |
| /* setLineElementByBRElement.css */ | |
| /* XHTML 2.0 */ | |
| .l { display: block; border-style: none none solid; border-bottom: solid 1px #ddd; } | |
| --></style> | |
| <script type="text/javascript" src="./setLineElementByBRElement.js"></script> | |
| <script type="text/javascript"><!-- | |
| function init (event) { | |
| var doc = event.target || document; | |
| setLineElementByBRElement(doc.getElementById('Hiragana')); | |
| setLineElementByBRElement(doc.getElementById('Alphabet')); | |
| } | |
| //--></script> | |
| </head> | |
| <body onload="init(event);"> | |
| <h1>setLineElementByBRElement.js</h1> | |
| <h2 id="Description">解説</h2> | |
| <p>br要素区切りの文章を XHTML 2.0 規定のl要素で区切ります。XHTML 2.0 は廃止されたので <code><span class="l"></code> で代用しています。</p> | |
| <p>サンプルでは <code>.l</code> に下線を引くことで大学ノートのようなデザインを実現しています。<br />(* 自動改行(折り返し)が発生しないことが前提としてあり、完全ではありません。)</p> | |
| <h2 id="Download">ダウンロード</h2> | |
| <ul> | |
| <li><a href="./setLineElementByBRElement.js">setLineElementByBRElement.js</a></li> | |
| <li><a href="http://gist.github.com/614981">gist: 614981 (setLineElementByBRElement.js) - GitHub</a></li> | |
| </ul> | |
| <h2 id="Sample">サンプル</h2> | |
| <p>ノート1</p> | |
| <div id="Hiragana" class="notebook">あいうえおかきくけこ<br />さしすせそたちつてと<br />なにぬねのはひふへほ</div> | |
| <p>ノート2</p> | |
| <div id="Alphabet" class="notebook">abcdefg<br />hijklmn</div> | |
| <h2 id="ReferenceURL">参考URL</h2> | |
| <dl> | |
| <dt>XHTML 2.0</dt> | |
| <dd> | |
| <ul> | |
| <li><a href="http://www.w3.org/TR/xhtml2/mod-text.html#sec_9.7.">9.7. The l element - XHTML 2.0</a></li> | |
| </ul> | |
| </dd> | |
| <dt>その他</dt> | |
| <dd> | |
| <ul> | |
| <li><a href="http://d.hatena.ne.jp/babu_babu_baboo/20101004#c1286405678">2010-10-04 - babu_babu_babooのごみ箱</a></li> | |
| <li><a href="http://okwave.jp/qa/q6231348.html">テキストに常に下線を引きたい(1/2) | OKWave</a></li> | |
| </ul> | |
| </dd> | |
| </dl> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // setLineElementByBRElement.js | |
| function setLineElementByBRElement (parentNode) { | |
| var doc, currentNode, nextSibling, lastChild, tagName, baseLine, line; | |
| doc = parentNode.ownerDocument; | |
| baseLine = doc.createElement('span'); | |
| baseLine.className = 'l'; | |
| nextSibling = parentNode.firstChild; | |
| lastChild = parentNode.lastChild; | |
| line = baseLine.cloneNode(false); | |
| while (nextSibling) { | |
| currentNode = nextSibling; | |
| nextSibling = currentNode.nextSibling; | |
| tagName = currentNode.tagName; | |
| if (tagName && tagName === 'BR') { | |
| parentNode.insertBefore(line, currentNode); | |
| parentNode.removeChild(currentNode); | |
| line = baseLine.cloneNode(false); | |
| } else if (currentNode === lastChild) { | |
| line.appendChild(currentNode); | |
| parentNode.appendChild(line); | |
| } else { | |
| line.appendChild(currentNode); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
下記URLにも同じものがあります。
setLineElementByBRElement.js
http://vird2002.s8.xrea.com/javascript/setLineElementByBRElement.html
OKWave で回答しました。
テキストに常に下線を引きたい(1/2) | OKWave
http://okwave.jp/qa/q6231348.html
gtlt さんからアドバイスをいただきました。
2010-10-04 - babu_babu_babooのごみ箱
http://d.hatena.ne.jp/babu_babu_baboo/20101004#c1286405678