Titels relevante nieuwsberichten niet volledig zichtbaar

[sbruggeman]

Browsend op mijn iPhone SE krijg ik onderaan een nieuwsbericht twee relevante nieuwsitems te zien. De titels van deze berichten worden niet in zijn geheel getoond, wat soms vreemde titels geeft.

Voorbeeld bij het artikel over Google Stadia. Twee relevante artikelen met als titel:

Gerucht: Google gaat komende maand
&
Google komt met aankondiging tijdens Game

[Room42]

Het stomme is dat ze ook op Desktop geen 'title'-tag meekrijgen met de volledige titel. Dus dan moet je de URL lezen om te weten wat de hele titel had moeten zijn. Mobiel lijkt me dat al helemaal lastig.

[crisp]

Bedoel je dit:



De titel wordt daar inderdaad na 2 regels afgekapt, maar dit is ook wel de allersmalste resolutie voor een mobiele telefoon. Volgens mij is de iPhone SE tegenwoordig een van de weinige toestellen met zo'n klein scherm.

[Room42]

@crisp Op desktop zie ik het zo:


(Ik kan het specifieke artikel van TS niet direct vinden) Gevonden

[ Voor 45% gewijzigd door Room42 op 19-03-2019 22:55 ]

[crisp]

Daar zou inderdaad wel een tooltip op mogen, alleen heb je daar op een mobieltje nog steeds niets aan...

[Hahn]

crisp schreef op dinsdag 19 maart 2019 @ 22:49:
Bedoel je dit:

[Afbeelding]

De titel wordt daar inderdaad na 2 regels afgekapt, maar dit is ook wel de allersmalste resolutie voor een mobiele telefoon. Volgens mij is de iPhone SE tegenwoordig een van de weinige toestellen met zo'n klein scherm.

Het zou natuurlijk wel helpen als er een indicatie is dat de titel langer is dan getoond wordt (ellipsis bijvoorbeeld).

[Room42]

crisp schreef op dinsdag 19 maart 2019 @ 22:55:
Daar zou inderdaad wel een tooltip op mogen, alleen heb je daar op een mobieltje nog steeds niets aan...

Het enige pluspunt, in Firefox op Android dan, is dat als je dan lang op de link drukt, je de titel in de pop-up kunt lezen.

[crisp]

Hahn schreef op dinsdag 19 maart 2019 @ 22:55:
[...]

Het zou natuurlijk wel helpen als er een indicatie is dat de titel langer is dan getoond wordt (ellipsis bijvoorbeeld).

Ellipsis werkt helaas niet met multiline text...

[Hahn]

crisp schreef op dinsdag 19 maart 2019 @ 22:59:
[...]

Ellipsis werkt helaas niet met multiline text...

Er zijn wel manieren om het voor elkaar te krijgen, maar heel makkelijk is het niet.

[crisp]

Hahn schreef op dinsdag 19 maart 2019 @ 23:01:
[...]

Er zijn wel manieren om het voor elkaar te krijgen, maar heel makkelijk is het niet.

Die manieren vallen ook wel onder de noemer 'hacks' en zijn allemaal ranzig Ik heb dan nog liever dat we ze op de smalste resolutie gewoon helemaal niet afkappen.

[Toxic_Dreams]

crisp schreef op dinsdag 19 maart 2019 @ 22:59:
[...]

Ellipsis werkt helaas niet met multiline text...

In meerdere browser kan dit ondertussen wel, enkel Firefox en verschillende mobiele browsers ondersteunen dit niet helemaal. Zie: https://caniuse.com/#search=line-clamp

Edit: oh, en Internet Explorer, maar die browser neem ik niet meer serieus ;p

[ Voor 11% gewijzigd door Toxic_Dreams op 19-03-2019 23:17 ]

[crisp]

Toxic_Dreams schreef op dinsdag 19 maart 2019 @ 23:16:
[...]


In meerdere browser kan dit ondertussen wel, enkel Firefox en verschillende mobiele browsers ondersteunen dit niet helemaal. Zie: https://caniuse.com/#search=line-clamp

Edit: oh, en Internet Explorer, maar die browser neem ik niet meer serieus ;p

Ja, die had ik ook gevonden, maar dat blijft een non-standards oplossing, dus hacky

Maar ik zal eens kijken of we dat met een fatsoenlijke fallback kunnen gebruiken. Het lost het probleem van de TS echter niet op...

[Toxic_Dreams]

crisp schreef op dinsdag 19 maart 2019 @ 23:28:
Ja, die had ik ook gevonden, maar dat blijft een non-standards oplossing, dus hacky

Maar ik zal eens kijken of we dat met een fatsoenlijke fallback kunnen gebruiken. Het lost het probleem van de TS echter niet op...

Hmm..

Cascading Stylesheet:

.ellipsis_text-two_lines {
    display: block;
    display: -webkit-box;
    display: -mox-box;
    display: box;
    min-height: calc(2 * 1.2em); /* Zorgt ervoor dat elke element dezelfde hoogte heeft. */
    max-height: calc(2 * 1.2em); /* Maximale hoogte = 2 regels. Dus line-height keer 2. */
    overflow: hidden;
    white-space: normal;
    line-height: 1.2em;
    -mox-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
}

Dit zou moeten werken, enkel in bovengenoemde browsers gebeurt er dan simpelweg niks. Dat het het probleem van de TS niet oplost ben ik met je eens, echter is het wel duidelijker dat er nog wat bij de titel hoort.

Het probleem van de TS is ook een beetje een lastige, je wilt namelijk zo veel mogelijk items tonen, en dat gaat nu eenmaal lastig op zulke kleine schermen. Er kan altijd nog een oplossing worden bedacht met custom CSS, mocht hij graag altijd de gehele titel zien..

[crisp]

Toxic_Dreams schreef op dinsdag 19 maart 2019 @ 23:48:
[...]


Hmm..

Cascading Stylesheet:

.ellipsis_text-two_lines {
    display: block;
    display: -webkit-box;
    display: -mox-box;
    display: box;
    min-height: calc(2 * 1.2em); /* Zorgt ervoor dat elke element dezelfde hoogte heeft. */
    max-height: calc(2 * 1.2em); /* Maximale hoogte = 2 regels. Dus line-height keer 2. */
    overflow: hidden;
    white-space: normal;
    line-height: 1.2em;
    -mox-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
}

Inderdaad, hmm... Ik denk niet dat je dat zo zou moeten willen

[sbruggeman]

crisp schreef op dinsdag 19 maart 2019 @ 22:49:
Bedoel je dit:

[Afbeelding]

De titel wordt daar inderdaad na 2 regels afgekapt, maar dit is ook wel de allersmalste resolutie voor een mobiele telefoon. Volgens mij is de iPhone SE tegenwoordig een van de weinige toestellen met zo'n klein scherm.

Dit is inderdaad wat ik bedoel.
Ik zie vooral veel ingewikkelde oplossingen die voorgesteld worden. Mijn mening is dat het simpel op te lossen is door:

• lettertype iets verkleinen
• meer ruimte reserveren voor een derde regel, zodat je de titel volledig kan tonen

[ Voor 5% gewijzigd door sbruggeman op 20-03-2019 10:12 . Reden: tweede bulletpoint verduidelijkt ]