Swing/EditorPaneListStyle のバックアップの現在との差分(No.1)
- バックアップ一覧
- 差分 を表示
- 現在との差分 - Visual を表示
- ソース を表示
- バックアップ を表示
- Swing/EditorPaneListStyle へ行く。
- 追加された行はこの色です。
- 削除された行はこの色です。
TITLE:JEditorPaneのStyleSheetを使ってlist bulletを画像に変更 #navi(../) #tags(JEditorPane, HTMLEditorKit, StyleSheet) RIGHT:Posted by &author(aterai); at 2012-12-10 *JEditorPaneのStyleSheetを使ってlist bulletを画像に変更 [#w8513598] ``JEditorPane``の``HTMLEditorKit``から``StyleSheet``を取得し、``list-style-image``を使って``List bullet``を変更します。 --- category: swing folder: EditorPaneListStyle title: JEditorPaneのStyleSheetを使ってlist bulletを画像に変更 tags: [JEditorPane, HTMLEditorKit, StyleSheet] author: aterai pubdate: 2012-12-10T00:03:24+09:00 description: JEditorPaneのHTMLEditorKitからStyleSheetを取得し、list-style-imageを使ってList bulletを変更します。 image: https://lh4.googleusercontent.com/-cVKrTqKAhYk/UMSbt8J09jI/AAAAAAAABY0/IWonqNua5dM/s800/EditorPaneListStyle.png --- * 概要 [#summary] `JEditorPane`の`HTMLEditorKit`から`StyleSheet`を取得し、`list-style-image`を使って`List bullet`を変更します。 -&jnlp; -&jar; -&zip; #download(https://lh4.googleusercontent.com/-cVKrTqKAhYk/UMSbt8J09jI/AAAAAAAABY0/IWonqNua5dM/s800/EditorPaneListStyle.png) //#screenshot #ref(https://lh4.googleusercontent.com/-cVKrTqKAhYk/UMSbt8J09jI/AAAAAAAABY0/IWonqNua5dM/s800/EditorPaneListStyle.png) **サンプルコード [#pb688939] * サンプルコード [#sourcecode] #code(link){{ HTMLEditorKit htmlEditorKit = (HTMLEditorKit)pane.getEditorKit(); JEditorPane pane = new JEditorPane(); pane.setContentType("text/html"); pane.setEditable(false); HTMLEditorKit htmlEditorKit = (HTMLEditorKit) pane.getEditorKit(); StyleSheet styleSheet = htmlEditorKit.getStyleSheet(); String u = getClass().getResource(bullet).toString(); styleSheet.addRule(String.format("ul{list-style-image:url(%s);margin:0px 20px;", u)); //styleSheet.addRule("ul{list-style-type:circle;margin:0px 20px;}"); //styleSheet.addRule("ul{list-style-type:disc;margin:0px 20px;}"); //styleSheet.addRule("ul{list-style-type:square;margin:0px 20px;}"); //styleSheet.addRule("ul{list-style-type:decimal;margin:0px 20px;}"); styleSheet.addRule(String.format("ul{list-style-image:url(%s);margin:0px 20px;}", u)); }} **解説 [#hea62015] - 上: ``Default`` - 下: ``ul{list-style-image:url(bullet.png);}`` -- ``CSS``の``list-style-image``プロパティを使って、``bullet``を画像に変更 -- ``AlignmentY``が中心にならない?ので、画像の下に余白を追加 -- ``ul``のマージンも``margin:0px 20px;``に変更 * 解説 [#explanation] - 上: `Default` - 下: `ul{list-style-image:url(bullet.png);}` -- `CSS`の`list-style-image`プロパティを使用して`bullet`を画像に変更 -- `AlignmentY`を設定しても行揃えが中央にならないので画像の下に余白を追加 -- `ul`のマージンも`margin:0px 20px;`に変更 ---- - ``javax.swing.text.html.CSS``は、``list-style-type``プロパティも対応しているので、``circle``, ``square``, ``decimal``などが``bullet``として使用できるが、サイズは固定 - `javax.swing.text.html.CSS`は`list-style-type`プロパティも対応しているので`circle`、`square`、`decimal`などが`bullet`として使用可能(サイズは固定で変更不可?) #code{{ styleSheet.addRule("ul{list-style-type:circle;margin:0px 20px;}"); //styleSheet.addRule("ul{list-style-type:disc;margin:0px 20px;}"); //styleSheet.addRule("ul{list-style-type:square;margin:0px 20px;}"); //styleSheet.addRule("ul{list-style-type:decimal;margin:0px 20px;}"); // styleSheet.addRule("ul{list-style-type:disc;margin:0px 20px;}"); // styleSheet.addRule("ul{list-style-type:square;margin:0px 20px;}"); // styleSheet.addRule("ul{list-style-type:decimal;margin:0px 20px;}"); }} ---- - ``javax.swing.text.html.CSS``は、``a:hover``などの擬似クラス(``pseudo-classes``)や、``:before``などの擬似要素(``pseudo elements``)に対応していないので、以下のように``list-style-type:none``として``:before``で任意の文字を``bullet``に適用することができない - `javax.swing.text.html.CSS`は`a:hover`などの擬似クラス(`pseudo-classes`)や`:before`などの擬似要素(`pseudo elements`)に対応していないので、以下のように`list-style-type:none`として`:before`で任意の文字を`bullet`に適用できない #code{{ styleSheet.addRule("ul{list-style-type:none;margin:0px 20px;}"); styleSheet.addRule("ul li:before{content: "\u00BB";}"); styleSheet.addRule("ul li:before{content:'\u00BB';}"); }} - `javax.swing.text.html.StyleSheet.ListPainter#drawShape(...)`などをオーバーライドできれば直接`bullet`の形やサイズを変更できそうだが、コンストラクタがパッケージプライベートのため変更不可 ---- - ``javax.swing.text.html.StyleSheet.ListPainter#drawShape(...)``などをオーバーライドできれば直接``bullet``の形やサイズを変更できそうだが、コンストラクタがパッケージプライベート * 参考リンク [#reference] - [[JEditorPaneのHTMLEditorKitにCSSを適用>Swing/StyleSheet]] - [https://bugs.openjdk.org/browse/JDK-8201925 JDK-8201925 JEditorPane unordered list bullets look pixelated - Java Bug System] //**参考リンク **コメント [#x44086e8] * コメント [#comment] #comment #comment