Specifying line-clamp

1. Specifying (updates on the CSSWG and implementing them in Blink) Andreu Botella November 2022 1

2. Click here to see some cool example of functionality that will show up if you click here come on bro come … CSS REALLY IS AWES… 2

3. Something similar, but for block overﬂow? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in… 3

4. Introduced in WebKit around 2009 (vendor-preﬁxed ) 4

5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ofﬁcia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ofﬁcia deserunt mollit anim id est laborum. Something else. 5

10. Andreu Botella ( ) He/they I work at I’m helping get speciﬁed and implemented This work is sponsored by andreubotella.com 6

11. The current version of in the specs https://w3c.github.io/csswg-drafts/css-overﬂow-3/#line-clamp 7

12. The current version of in the specs https://w3c.github.io/csswg-drafts/css-overﬂow-3/#line-clamp Based on fragmentation 7

15. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ofﬁcia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur ▾ 8

19. -based ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do… eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ofﬁcia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 9

20. -based ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do… 9

21. -based ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do… 9

22. Let’s ship this! 10

23. Let’s ship this! …right? 10

24. Let’s ship this! …right? With LayoutNG you don’t need to layout pages that will be discarded 10

25. Let’s ship this! …right? With LayoutNG you don’t need to layout pages that will be discarded Interacting with legacy still needs full layout 10

26. Let’s ship this! …right? With LayoutNG you don’t need to layout pages that will be discarded Interacting with legacy still needs full layout In M108 nothing uses legacy anymore, and this is being worked on ( , ) “Stop copying back geometry data to LayoutBox” issue 1353190 10

27. Let’s ship this! …right? With LayoutNG you don’t need to layout pages that will be discarded Interacting with legacy still needs full layout In M108 nothing uses legacy anymore, and this is being worked on ( , ) “Stop copying back geometry data to LayoutBox” issue 1353190 Will still take months 10

28. Let’s ship this! …right? With LayoutNG you don’t need to layout pages that will be discarded Interacting with legacy still needs full layout In M108 nothing uses legacy anymore, and this is being worked on ( , ) “Stop copying back geometry data to LayoutBox” issue 1353190 Will still take months Other browsers are far behind 10

29. Alternative proposal 11

33. https://github.com/w3c/csswg-drafts/issues/7708 12

34. But going back to fragmentation… 13

35. But going back to fragmentation… The longhands are a ﬁrst step to allow broken ﬂows of text: 13

36. But going back to fragmentation… uses fragmentation (as soon as it's available) The longhands are a ﬁrst step to allow broken ﬂows of text: 13

37. But going back to fragmentation… uses fragmentation (as soon as it's available) uses the new model sets The longhands are a ﬁrst step to allow broken ﬂows of text: 13

38. But going back to fragmentation… uses fragmentation (as soon as it's available) uses the new model sets But you can opt into fragmentation with The longhands are a ﬁrst step to allow broken ﬂows of text: 13

39. 14

Specifying line-clamp

Esté a ler uma amostra.

Confira estes a seguir

Specifying line-clamp

Mais Conteúdo rRelacionado

Semelhante a Specifying line-clamp (20)

Mais de Igalia (20)

Mais recentes (20)