- 追加された行はこの色です。
- 削除された行はこの色です。
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``を変更します。
---
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を変更します。
---
* 概要 [#w8513598]
`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]
* サンプルコード [#pb688939]
#code(link){{
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;``に変更
* 解説 [#hea62015]
- 上: `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;}");
}}
----
- ``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";}");
}}
----
- ``javax.swing.text.html.StyleSheet.ListPainter#drawShape(...)``などをオーバーライドできれば直接``bullet``の形やサイズを変更できそうだが、コンストラクタがパッケージプライベート
- `javax.swing.text.html.StyleSheet.ListPainter#drawShape(...)`などをオーバーライドできれば直接`bullet`の形やサイズを変更できそうだが、コンストラクタがパッケージプライベート
//**参考リンク
**コメント [#x44086e8]
* 参考リンク [#oe071e3c]
- [[JEditorPaneのHTMLEditorKitにCSSを適用>Swing/StyleSheet]]
* コメント [#x44086e8]
#comment
#comment