Skip to content

Commit

Permalink
Fixed image captions appearing twice in full text articles
Browse files Browse the repository at this point in the history
  • Loading branch information
@spacecowboy
spacecowboy committed Nov 30, 2023
1 parent 18ba6fb commit 9950fdb
Showing 1 changed file with 37 additions and 19 deletions.
56 changes: 37 additions & 19 deletions app/src/main/java/com/nononsenseapps/feeder/ui/compose/text/HtmlToComposable.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ import com.nononsenseapps.feeder.ui.compose.theme.BlockQuoteStyle
import com.nononsenseapps.feeder.ui.compose.theme.CodeBlockBackground
import com.nononsenseapps.feeder.ui.compose.theme.CodeBlockStyle
import com.nononsenseapps.feeder.ui.compose.theme.CodeInlineStyle
import com.nononsenseapps.feeder.ui.compose.theme.FeederTheme
import com.nononsenseapps.feeder.ui.compose.theme.LinkTextStyle
import com.nononsenseapps.feeder.ui.compose.theme.LocalDimens
import com.nononsenseapps.feeder.ui.compose.theme.hasImageAspectRatioInReader
Expand Down Expand Up @@ -512,6 +513,19 @@ private fun HtmlComposer.appendTextChildren(
}
}

"figcaption" -> {
// If not inside figure then FullTextParsing just failed
if (element.parent()?.tagName() == "figure") {
appendTextChildren(
nodes = element.childNodes(),
preFormatted = preFormatted,
baseUrl = baseUrl,
onLinkClick = onLinkClick,
keyHolder = keyHolder,
)
}
}

"figure" -> {
emitParagraph()

Expand Down Expand Up @@ -1166,18 +1180,22 @@ private fun TestIt() {
<p>In Gimp you go to <em>Image</em> in the top menu bar and select <em>Mode</em> followed by <em>Indexed</em>. Now you see a popup where you can select the number of colors for a generated optimum palette.</p> <p>You&rsquo;ll have to experiment a little because it will depend on your image.</p> <p>I used this approach to shrink the size of the cover image in <a href="https://cowboyprogrammer.org/2016/08/zopfli_all_the_things/">the_zopfli post</a> from a 37KB (JPG) to just 15KB (PNG, all PNG sizes listed include Zopfli compression btw).</p> <h2 id="straight-jpg-to-png-conversion-124kb">Straight JPG to PNG conversion: 124KB</h2> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things.png" alt="PNG version RGB colors" /></p> <p>First off, I exported the JPG file as a PNG file. This PNG file had a whopping 124KB! Clearly there was some bloat being stored.</p> <h2 id="256-colors-40kb">256 colors: 40KB</h2> <p>Reducing from RGB to only 256 colors has no visible effect to my eyes.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_256.png" alt="256 colors" /></p> <h2 id="128-colors-34kb">128 colors: 34KB</h2> <p>Still no difference.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_128.png" alt="128 colors" /></p> <h2 id="64-colors-25kb">64 colors: 25KB</h2> <p>You can start to see some artifacting in the shadow behind the text.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_64.png" alt="64 colors" /></p> <h2 id="32-colors-15kb">32 colors: 15KB</h2> <p>In my opinion this is the sweet spot. The shadow artifacting is barely noticable but the size is significantly reduced.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_32.png" alt="32 colors" /></p> <h2 id="16-colors-11kb">16 colors: 11KB</h2> <p>Clear artifacting in the text shadow and the yellow (fire?) in the background has developed an outline.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_16.png" alt="16 colors" /></p> <h2 id="8-colors-7-3kb">8 colors: 7.3KB</h2> <p>The broom has shifted in color from a clear brown to almost grey. Text shadow is just a grey blob at this point. Even clearer outline developed on the yellow background.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_8.png" alt="8 colors" /></p> <h2 id="4-colors-4-3kb">4 colors: 4.3KB</h2> <p>Interestingly enough, I think 4 colors looks better than 8 colors. The outline in the background has disappeared because there&rsquo;s not enough color spectrum to render it. The broom is now black and filled areas tend to get a white separator to the outlines.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_4.png" alt="4 colors" /></p> <h2 id="2-colors-2-4kb">2 colors: 2.4KB</h2> <p>Well, at least the silhouette is well defined at this point I guess.</p> <p><img src="https://cowboyprogrammer.org/images/2017/10/zopfli_all_the_things_2.png" alt="2 colors" /></p> <hr/> <p>Other posts in the <b>Migrating from Ghost to Hugo</b> series:</p> <ul class="series"> <li>2016-10-21 &mdash; Reduce the size of images even further by reducing number of colors with Gimp </li> <li>2016-08-26 &mdash; <a href="https://cowboyprogrammer.org/2016/08/zopfli_all_the_things/">Compress all the images!</a> </li> <li>2016-07-25 &mdash; <a href="https://cowboyprogrammer.org/2016/07/migrating_from_ghost_to_hugo/">Migrating from Ghost to Hugo</a> </li> </ul>
""".trimIndent()

html.byteInputStream().use { stream ->
LazyColumn {
htmlFormattedText(
inputStream = stream,
baseUrl = "https://cowboyprogrammer.org",
keyHolder =
object : ArticleItemKeyHolder {
override fun getAndIncrementKey(): Long {
return Random.nextLong()
}
},
) {}
FeederTheme {
Surface {
html.byteInputStream().use { stream ->
LazyColumn {
htmlFormattedText(
inputStream = stream,
baseUrl = "https://cowboyprogrammer.org",
keyHolder =
object : ArticleItemKeyHolder {
override fun getAndIncrementKey(): Long {
return Random.nextLong()
}
},
) {}
}
}
}
}
}
Expand Down Expand Up @@ -1308,21 +1326,21 @@ fun Element.appendCorrectlyNormalizedWhiteSpaceRecursively(
}
}

private const val space = ' '
private const val tab = '\t'
private const val linefeed = '\n'
private const val carriageReturn = '\r'
private const val SPACE = ' '
private const val TAB = '\t'
private const val LINE_FEED = '\n'
private const val CARRIAGE_RETURN = '\r'

// 12 is form feed which as no escape in kotlin
private const val formFeed = 12.toChar()
private const val FORM_FEED = 12.toChar()

// 160 is &nbsp; (non-breaking space). Not in the spec but expected.
private const val nonBreakableSpace = 160.toChar()
private const val NON_BREAKING_SPACE = 160.toChar()

private fun isCollapsableWhiteSpace(c: String) = c.firstOrNull()?.let { isCollapsableWhiteSpace(it) } ?: false

private fun isCollapsableWhiteSpace(c: Char) =
c == space || c == tab || c == linefeed || c == carriageReturn || c == formFeed || c == nonBreakableSpace
c == SPACE || c == TAB || c == LINE_FEED || c == CARRIAGE_RETURN || c == FORM_FEED || c == NON_BREAKING_SPACE

/**
* Super basic function to strip html formatting from alt-texts.
Expand Down

0 comments on commit 9950fdb

Please sign in to comment.