Blocks och långa beskrivningar

Öppna Data Forum
1

Hej!

Vi har implementerat en listning av våra öppna data mha sådana “blocks”.
Vi att när vår beskrivande text är väldigt lång, klipps meningen av och det läggs till ellipsis-ar (“…” alltså).

Vi vill gärna inte ha ellipsis, eller klippa av våra meningar; det är inte optimalt ur ett tillgänglighetsperspektiv. Beskrivningarna behöver också vara rätt så långa, i alla fall när vi fäller ut data-itemet.

Finns det någon möjlighet för den kortare beskrivningen vid ihopfällda block-items att respektera radbrott? I så fall kan vi lägga in en punkt och en newline, och resten syns när blocket fälls ut.

Annars kan en idé vara att erbjuda en short description på varje item av Open Data! Max 100 tecken eller så.

Med vänliga hälsningar,
David Kraft

1 Like
2

Hej @kreafty
Ber om ursäkt i förväg om jag kommer dragande med en massa självklarheter. Skumma till slutet om så är fallet.

Det som är bra är att våra elipsis är av den klassiska typen som inte tar bort innehåll utan bara döljer det för den som tittar på skärmen. Screen readers klarar av att läsa hela texten (som finns där trots att den inte visas).

Ett första steg är att se till att sidmallen som du använder för inbäddningen är bred nog så texten får mer plats.
Om det ändå är intressant att visa fler rader av texten så går det att åstadkomma med styling.
Har du eller någon annan möjlighet att lägga till egen styling (css) på sidan?
Ett exempel på hur vi har gjort tidigare går att se på Naturvårdsverkets Blocks sida https://oppnadata.naturvardsverket.se/
Där visas default tre rader text innan … läggs till och resten döljs. Det fungerar också med screen readers och gör att sidor med väldigt begränsad bredd ändå kan visa mer text.

En css som skulle kunna fungera (beror lite på vad för typ av sida ni har) är

.entryscape .entryList .esbRowHead {
    max-height: unset;
}

.entryscape .esbRow > .esbRowHead .esbDescription {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    white-space: pre-line;
    word-break: break-word;
    -webkit-box-orient: vertical;
}

.entryscape .esbRowExpanded .esbDescription {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}
```e
1 Like
3

@henriette tack för ditt svar! Tyckte det var bra, och jag blev mer bekant med ev. lösningar till problemet!

Det var bra CSS. En del av våra texter är vääldigt långa (4 - 5 stycken, med flera rader i varje stycke). Vi vill gärna inte klippa en mening mitt i egentligen, med eller utan ellipsis. Som ditt exempel visar, kan vi ändra antalet rader, eller rent av ta bort max-höjden och visa allt, men det blir väldigt stökigt bland våra items.

Vi försökte ändra i själva texten: vi började en beskrivning med en kort mening, la in två radbrott, och sen fortsatte vi texten. Då skulle vi få en kort beskrivning tänkte vi.

Men när itemet är infällt, så ersätts alla whitespaces med 1 whitespace. Så vi kan inte manipulera exakt vad som visas i infällt läge. Det hade hjälpt oss i fall detta beteende ändrades, men jag inser att det hade ändrats för alla konsumenter av integrationen. Så det hade nog varit bättre med möjligheten till en “short description”, som visas i infällt läge. Tror inte vi har några CSS-möjligheter, och vi vill inte pilla med Javascript (det leder till andra problem.)

Lång och säkert förvirrande post här!

Jag antar att kärnan är att vi ber om en ny feature, där vi kan mata in en “short description” typ.

1 Like
4

Hej @kreafty,
bra att du tyckte om mitt svar. Ber @mattias svara angående feature request på kort beskrivning.

Anledningen till att vi har lösningen med elipsis är att det är svårt att veta vilken textstorlek användaren har ställt in i sin browser.

Men jag kan hjälpa dig med 1 whitespace i det infällda läget. Det är återigen css som är inne och justerar innehållets visning. För att ändra beteendet så är det white-space inställningen som behöver justeras. Mer info kan du se här white-space - CSS: Cascading Style Sheets | MDN

Det är denna inställning som “trycker ihop” innehållet

.entryscape .esbRow > .esbRowHead .esbDescription {
   white-space: pre-line;
}

ändra den till

.entryscape .esbRow > .esbRowHead .esbDescription {
   white-space: pre-wrap;
}

Så bryts texten även i “infällt läge”

1 Like
5

@henriette aah, titta! Det visste jag inte.

Detta tror jag vi kan använda och få till något med!

Jag testar och återkommer ifall det är något mer.
Tack så mycket för all hjälp!

1 Like
6

@kreafty Gällande feature request får vårt utvecklingsteam kolla på det och bedöma om det är något som kan bli en generell uppgradering. :slight_smile: Kan du återkoppla hur det gått, oavsett utfall, så vi vet om det hjälpt eller ej? :slight_smile:

7

@mattias yes, förstår det! Det är inte gratis att utveckla, och en generell nytta är inte klargjord :slight_smile:

Yes! Det landade i att vi tar bort beskrivningen helt, i infällt läge. Pre-wrap hjälper för att bara visa första raden, men det skapar krav på våra skribenter att ha en kort första rad, som avslutas med två blanksteg. Det behöver kommuniceras tydligt, och det kommer bli fel någon gång. Inte superstor grej, men ändå.

Vi har också liknande konstruktioner där vi valt att inte ha utfällande text heller, så till slut rann bägaren över för att ta bort beskrivningen. Men, vi besöker säkert punkten i framtiden igen!

När det rullats ut i produktion kan jag skicka en länk! :smiley:

1 Like
8

Såhär blev det till slut!

1 Like
9

Snyggt jobbat @kreafty! Hur var det att jobba med EntryScape Blocks? Tror du det kan bli aktuellt även för Skatteverket.se/psidata ? Vi är på gång med förbättringar för Blocks som ska hjälpa till att öka den externa sökbarheten. Kan mejla dig om det. :slight_smile: