Использование HTMLEditorKit в тегах Java, <img>игнорирует мои стили CSS (но текст воспринимает стили просто отлично) - PullRequest
Новая
       26

Использование HTMLEditorKit в тегах Java, <img>игнорирует мои стили CSS (но текст воспринимает стили просто отлично)

0 голосов
/ 20 апреля 2020

Хорошо, я работаю над "окном чата" в Java, которое построено с помощью HTMLEditorKit. Общий подход заключается в том, что я сначала создаю таблицу стилей, используя StyleSheet.addRule (). Я создаю таблицу стилей: 

body  {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
p     {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.msg  {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.csa  {color:#ff0000; font-family:SansSerif; font-size:12pt;}
.usa  {color:#0000ff; font-family:SansSerif; font-size:12pt;}
.icon {width:16px; height:16px; object-position:0 5px; }

Затем, когда у меня есть строка чата, которую я хочу применить, я помещаю ее в div и добавляю ее в JTextPane: 

try {       
  kit.insertHTML(doc, doc.getLength(), "\n<div class="+style+">" + s + "</div>", 0, 0, null);                   
} catch (BadLocationException ble) {
  ErrorDialog.bug(ble);           
} catch (IOException ex) {
  ErrorDialog.bug(ex);            
}
conversation.update(conversation.getGraphics()); //Force update of graphics

Пока все работает нормально! Затем возникает проблема желания добавлять небольшие изображения в текст.

Добавление самих изображений также идет хорошо, пока я придерживаюсь атрибутов html, например: 

<img src="dice.png" width="16" height="16">

НО, как только я пытаюсь выполнить ЛИБО из следующего две вещи, это игнорирует все мои стили: 

<img src="dice.png" class="icon">

<img src="dice.png" style="{width:16px; height:16px; object-position:0 5px; }">

Я перепробовал все виды обходных путей, включая теги span, я попробовал стили ID (например, #icon и id = "icon"), отдельные div, et c. Нет радости!

Это дополнение к устаревшему программному обеспечению, работающему под довольно старой версией Java (1.8), поэтому я всегда "ожидаю худшего", но, как я уже сказал, все другие CSS элементы стиля (насколько текст и макет go) работают отлично. Поиск каких-либо советов по устранению неполадок, ИЛИ, если есть какие-то особые ограничения HTMLEditorKit с изображениями (но опять же все мои изображения работают отлично, пока я придерживаюсь атрибутов html вместо CSS, и все же все мои CSS работают нормально с текст). Большое спасибо за любую помощь.

1 Ответ

1 голос
/ 20 апреля 2020

попробуйте установить изображение на display: block или display:inline-block. inline-block может не поддерживаться. если изображение display: inline, то свойства высоты и ширины не будут влиять на изображение. Также рекомендуется устанавливать ширину только для поддержания соотношения сторон. 

.icon1 {
  width: 100px;
  height: 100px;
  display: block;
}

.icon2 {
  width: 110px;
  height: 110px;
  display: inline-block;
}

.icon3 {
  width: 120px;
  display: block;
}


/* extra styles for example */

img {
  margin: 4px;
}
<div class="wrap">
  <!-- div not required, just to wrap image in this example -->
  <img src="https://placekitten.com/130/130" class="icon1">
  <img src="https://placekitten.com/128/128" class="icon2">
  <img src="https://placekitten.com/132/132" class="icon3">
</div>

Редактировать:

Использование div с фоновым изображением, установленным с background-image: url(path/to/image/file), может работать, если вы установите div и высоту и ширину.

...