23:58:43 RRSAgent has joined #tokyows 23:58:43 logging to https://www.w3.org/2018/09/17-tokyows-irc 23:58:55 Zakim has joined #tokyows 23:58:59 kaz has joined #tokyows 23:59:13 rrsagent, set log public 23:59:29 rrsagent, make log public 23:59:35 rrsagent, draft minutes 23:59:35 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 00:00:09 rodzvilla has joined #tokyows 00:00:18 Shinya_ has joined #tokyows 00:00:21 meeting: Digital Publication Layout and Presentation 00:00:43 Chair: Luc, Florian, Makoto 00:02:24 jkamata has joined #tokyows 00:04:10 dauwhe has joined #tokyows 00:04:18 present+ 00:04:56 rrsagent, draft minutes 00:04:56 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 00:06:25 murakami has joined #tokyows 00:06:31 jyoshii has joined #tokyows 00:06:56 join jyoshii 00:07:00 JunGamo has joined #tokyows 00:07:33 topic: Introduction 00:07:37 Shinya_ has joined #tokyows 00:07:58 birtles has joined #tokyows 00:08:07 r12a has joined #tokyows 00:08:16 nmccully has joined #tokyows 00:08:22 Murata has joined #tokyows 00:08:37 hober has joined #tokyows 00:09:29 kaz_ has joined #tokyows 00:09:37 rrsagent, draft minutes 00:09:37 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz_ 00:09:44 opening talk by Ivan 00:09:47 FlorianDupas has joined #tokyows 00:10:27 myles_ has joined #tokyows 00:10:51 Bobbytung has joined #tokyows 00:11:27 Yanni has joined #tokyows 00:11:44 i/opening talk/Florian gives logistical information including the lunch and the reception./ 00:11:47 Willy has joined #tokyows 00:11:56 i/opening talk/topic: W3C Welcome 00:12:19 ih: gives brief introduction on what the W3C is like 00:13:12 ... work at W3C is based on the cooperation of Members 00:13:31 ... consensus is the center of our discussion 00:14:10 ... "W3C" doesn't develop standards; "W3C Members" do 00:14:56 Willy_ has joined #tokyows 00:15:26 ... AC Rep. to serve as liaison to W3C 00:16:01 .. Advisory Board (AB) is elected by W3C Membership and meets quarterly with the W3C CEO 00:16:19 ... Technical Advisory Group (TAG) with afocus on the architecture of the Web 00:16:31 ... also note the W3C Royalty Free Patent Policy 00:16:39 ... horizontal reviews 00:16:58 ... accessibility, internationalization, privacy, and security 00:17:07 ... publishing@w3c 00:17:56 ... publications as first class entities on the Web 00:17:58 Bobbytung has joined #tokyows 00:18:22 ... broadening W3C Membership - many companies involved 00:18:33 ... history 00:18:47 ... W3C and IDPF cooperation since 2013 00:18:58 ... established an IG 00:19:19 ... W3C was also part of the IDPF/IMS "EDUPUB" initiative 00:19:34 ... and then W3C and IDPF are "merged" in Feb. 2017 00:20:06 fantasai has joined #tokyows 00:20:21 ... publishing@W3C groups: Publishing BG, EPUB 3 CG, Publishing WG 00:21:29 tokyows has joined #tokyows 00:21:46 ... actually more 00:22:02 ... number of issues 00:22:24 ... relevant to publishing but not only for publishing 00:22:33 ... e.g.: 00:22:40 rachelnabors_ has joined #tokyows 00:22:51 ... pagination and general page control - CSS 00:23:06 ... accessibility - ARIA, AG 00:23:16 ... goal of the workshop 00:23:25 huijing has joined #tokyows 00:23:53 ... identify the technical problems and features that should be worked on in one of the existing W3C WGs 00:24:08 ... hopefully identify experts that can join the group to do the work 00:24:28 Shinya has joined #tokyows 00:24:29 ... if such a group doesn't exist, discuss whether a separate WG needed 00:24:45 ... how W3C works 00:25:08 ... Members move things forward! 00:25:17 scribenick: dauwhe 00:25:21 Ivan shows a photo of a conference panel: this is not how W3C works. It's not a bunch of experts giving opinions. 00:25:23 myles_ has joined #tokyows 00:25:43 I'm so excited to be here!! 00:26:10 Ivan shows a photo of a conference table with a variety of people sititng around it and lots of computer paraphanelia: This is how W3C works. It is a collaborative effort, everyone working together, lots of coffee and tea. 00:26:11 tokyows_ has joined #tokyows 00:26:17 Shinya has joined #tokyows 00:26:46 kida has joined #tokyows 00:26:50 rrsagent, draft minutes 00:26:50 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 00:27:14 Willy_readmoo has joined #tokyows 00:27:32 Topic: SESSION 1 — Current Status and Pain Points 00:28:04 laudrain: where are we in digital publications? 00:28:12 ... we have success with reflowable epubs 00:28:19 ... but what about complex books? 00:28:19 ivan has joined #tokyows 00:28:25 ... we have EPUB fixed layout (FXL) 00:28:30 present+ 00:28:38 Murata has joined #tokyows 00:28:41 ... we could not do this kind of book without FXL 00:28:48 i/gives brief intro/scribenick: kaz_/ 00:28:58 zakim, who is here? 00:28:58 Present: dauwhe, ivan 00:29:00 On IRC I see Murata, ivan, Willy_readmoo, kida, Shinya, tokyows_, myles_, huijing, rachelnabors_, fantasai, Yanni, FlorianDupas, kaz, hober, nmccully, r12a, birtles, JunGamo, 00:29:00 ... jyoshii, dauwhe, jkamata, rodzvilla, Zakim, RRSAgent, laudrain, ReinaldoFerraz, toshiakikoike, florian 00:29:16 ... our first FXL book was in 2011 00:29:41 ... we have now produced many thousands of FXL books 00:30:08 ... one example is education, where the pedagogy is "inside the layout" 00:30:14 ... and we have comics/manga 00:30:14 present+ makoto, Willy_Readmoo, Kida, Synya, Myles, Huijing, Rachel_Nabors, fantasai, Yanni, FlorianDupas, Kaz, hoper nmcully, r12a, birtles, jungamo 00:30:26 present+ hober 00:31:14 present+ Florian 00:31:16 ... some books have many images, so each page is just an image 00:31:29 ... and others have text + images, so the text is still searchable 00:33:14 ... (covers technical details of FXL) 00:34:33 ... "digital sequential art" 00:34:46 ... there was ascii art before there was html 00:34:49 Hyunwoo has joined #tokyows 00:35:18 ... now there is turbo media, webtoons, applications 00:36:02 ... there's a worldwide market, but with lots of diversity 00:36:39 rrsagent, draft minutes 00:36:39 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 00:36:58 ... EPUB used in japan for manga, proprietary formats in US, EPUB and apps in Europe 00:37:11 ... What are the problems? 00:37:27 ... FXL isn't responsive, isn't webby, isn't accessible 00:37:42 ... we (can) lose the semantics 00:37:52 i/AC Rep. to serve as liaison/scribenick: kaz/ 00:37:53 rrsagent, draft minutes 00:37:53 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 00:38:12 ... and there's conflict between the authors's intent of the layout and the user's experience 00:38:23 Shinya has joined #tokyows 00:38:47 ... there is no international standards for visual narratives in digital form 00:40:11 myles__ has joined #tokyows 00:40:42 murakami has joined #tokyows 00:40:42 ... thank you! 00:41:00 Scribenick: fantasai 00:41:37 Shinya_ has joined #tokyows 00:45:00 JC_BURIE has joined #tokyows 00:45:55 laudrain has joined #tokyows 00:46:53 SP describes his work at EDR 00:47:14 SP: I'm collecting all the use cases of comics around the world so that we can have a standard that can accommodate them all 00:47:35 SP: The ?? group is producing a "format", it's a ckind of web publication for comics 00:47:43 SP: IT's set as an extension to ePub 00:47:47 SP: with a declarative approach 00:48:05 SP: THis extension comes with resources: images, music, HTML, etc. Whatever you want. 00:48:19 s/??/BDCoMa (Bandes Desinees, Comics, Manga)/ 00:48:19 SP: The goals of the Wg 00:48:34 SP: 1st is most important, it's Total artistic control on the reader experience 00:48:53 SP: e.g. if you have an epub reader that simulates page turns, the aturhos want to offer a transition, it will not work. That's a big issue. 00:49:05 SP: Problem is that advanced digiatl publications have high cost 00:49:12 SP: So 2nd goal is low production cost 00:49:31 SP: Another goal is sustainability 00:49:32 myles__ has joined #tokyows 00:49:38 SP: This is why we are against a JS approach 00:49:44 SP: Want authors to have things compatible in the long term 00:49:45 laudrain has joined #tokyows 00:50:00 SP: Paper book, can read 2000 years later. Same problem. 00:50:24 SP: We have a retailers platform, briefly, we are a digital platform and have a large distribution chain in France 00:50:32 SP: Sequencity is partner in France 00:50:54 SP: I am co-edirector of SAIL, building artificial intelligence to understand the content of comics 00:51:16 SP: There is a young startup producing authoring tools, Kwalia. Important b/c authorin gis an important part of the production chain 00:51:21 SP: OK, so main use cases 00:51:34 SP: Main one is page, you are familiar with this is the epub world 00:51:39 SP: Classical maga, comics, use page 00:51:43 SP: After that is the crolling page 00:51:50 SP: Some pages immediately, in epub we have a problem 00:51:59 SP: Another use case is guided navigation 00:52:09 SP: On small screens, guided navigation from panel to panel 00:52:15 SP: It's aproblem in terms of artistic presentation 00:52:37 SP: It's a bad solution to read comics, but sometimes we need it. So it has to be part of the standardization. 00:52:55 SP: Let's talk about scrolling content, and intra-page navigation 00:53:18 SP: When you have scrolling content, you know that perfectly you have a fast market in Korea, also other areas. 00:53:28 SP: IT's a comic which scrolls *shows example from Korea* 00:53:32 SP: It's very very adapted to mobile 00:53:36 SP: You read by scrolling the content 00:53:47 SP: We have that also in France, but we didn't succeed to create a market 00:53:55 SP: here you have a blog in animated gif, a very beautiful blog 00:54:09 SP: Here is another author who is doing a very long scrolling storie 00:54:22 SP: Scrolling capability in epub would bring a lot of artistic possibilities 00:54:40 SP will post URL later 00:54:46 SP: That's the starting point. Problem comes just after 00:54:56 SP: Something authors want to do, don't have in Epub 00:55:06 SP: is simply to have starting point and have set direction in scroll 00:55:31 SP: If you need to have a viewport ratio that's fixed, what then? 00:55:58 SP: Some artists want padding between the drawing and the viewport to maintain this ratio. 00:56:15 SP: Next is scrolling, sometimes need smooth scrolling, sometimes with snap points 00:56:34 SP: ... 00:56:54 Sp: Here's an example of a french company which is doing black and white comics, you see they are using animation and parallax effects 00:57:13 s/.../Another issue is parallax, some comics use this technique/ 00:57:23 SP: ... 00:57:29 SP: This won the da vinci prize in Japan 00:57:52 SP: It's a page-fill ergonomic, but in fact it's scroll with parallax effects, and in some pages some animations 00:58:00 SP: The nimation is not a video inside an epub, this is an app 00:58:17 SP: Unfortunately app is not available in latest version of iOS. 00:58:24 SP: This is why we need a standard. 00:58:33 s/nimation/animation/ 00:58:41 SP: There is one more use case, it's when you add some effects 00:58:45 https://www.w3.org/TR/css-scroll-snap-1/ 00:59:28 SP: Here's an example, it is scrolling, but if you look closely some animated content, some parallax effects. 00:59:35 SP: Very small animation, very small effects 00:59:51 SP scrolls through teh comic, e.g. fish slightly move 01:00:06 SP: We're finished with intra-page navigation, now inter-page navigation 01:00:29 SP: Classical use cases, well, today the epub reading app has a transition. You turn the page, and you have an effect that is not decided by the author. 01:00:47 SP: We remove the transition effect of the reading app, and let the author decide the transition effect. 01:01:06 Sp: Useful effect we want to add, there are basically two things. One is effect like fade, slide, change the sequence of images 01:01:26 Sp: two type of effect: time-based or control-based (e.g. as swiping, depends on speed of swipe) 01:01:36 SP: Symmetric or non-symmetric effect 01:01:38 SP: ... 01:01:51 SP: Back to navigation, a classic use case is turbomedia 01:01:55 jyoshii has joined #tokyows 01:01:58 SP: One of the most basic the transition is a cut 01:02:26 SP: A simple cut *shows examples where parts of the comic are added on, enew frames or word bubbles* 01:02:36 join+ 01:02:37 SP: And of course, that kind of transition must work on all kinds of page. 01:02:47 SP: Another topic was guided view. 01:03:00 SP: Most powerful platforms in US are using a combination of transitions and guided navigation. 01:03:17 SP: Multiple renditions is another issue 01:03:27 SP: multilingual, multiple version s e.g. version 2, 01:03:42 SP: responsive to environment, e.g. mobile vs tablet 01:03:44 SP: ... 01:03:54 SP: Another concern is ections 01:04:21 SP: Chapter by chapter, ur subscription 01:04:26 SP: We are working on that. 01:04:36 SP: New version of digital comics taxonomy, v3 01:04:40 SP: focus on reading experience 01:04:46 SP: THis is part of the wrok in the manga working group 01:04:53 SP: https://github.com/edrlab/bd-comics-manga 01:05:10 SP: EDRlab is more than European, now global. We think we need members from Japan, Korea, the rest of the world. 01:05:14 SP: Thank you. 01:05:24 q+ to mention possible collaboration with TTWG and MEIG about time-synchronized navigation 01:05:29 kida has joined #tokyows 01:06:02 TOpic: Simple structure for fixed layout epub 01:06:11 Shinya Takami 01:06:16 rrsagent, draft minutes 01:06:16 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 01:06:40 ST: Technical director of Rakuten Kobo in 2012, of d-Magazzine in 2014 01:06:52 ST: Unfortunately in Japan, over 86% of ebook sales is fixed layout 01:07:11 ST: We try to convert text-based content in the past, but we couldn't reach the quality that publishers want 01:07:28 ST: In this time efficiency of production, distribution, and presentation... opportunity is important 01:07:37 ST shows graphs of ebook market 01:07:46 ST: Before, we had domestic format in Japan 01:07:57 ST: Changed to EPUB3 in Japn 01:08:09 ST: ... 01:08:25 ST: EPUB is mainly used as a package mechanism 01:08:33 ST: In Japan we have a standard FXL-EPUB 01:08:50 ST: Fixed layout standard structure. But it's a little bit complicated, and we have XSHTML and CSS and image 01:08:56 ST: Some SVG, something like that 01:09:08 ST: But it's to complex to parse or convert 01:09:29 ST: So many ebook services in japan convert epub to images and some settings for their reading system 01:09:52 ST: So we have to convert EPUB to other formats 01:10:01 ST: OPF is enough for conversion 01:10:09 ST: XHTML and CSS are not used in many fixed layout services 01:10:25 ST: Problem is SVG was very useful for fitting image in the screen 01:10:35 ST: But the latest browsers behavior is different 01:10:53 myles___ has joined #tokyows 01:10:53 ST: Our Japanese standard is not the same as W3C's standard, so we have to change something. 01:11:02 ST: I want to propose fixed layout structure that is simpler. 01:11:22 ST: spine & manifest link to JPEG, XHTML, PDF, Video directly 01:11:48 ST:Current epub requires fallback to XHTML 01:12:04 ST: We have some problems... 01:12:12 ST: image map feature is used in ToC page 01:12:17 nmccully_ has joined #tokyows 01:12:21 ST: and also expected to use for advertisement 01:12:44 ST: If we have only images and OPF, we have no way to indicate these maps 01:13:08 ST: So maybe some alternatives to image map are needed 01:13:53 ST: I think it's important to make these able to parse epub for new services, but currently the epub have to have some fallbacks for such images. 01:14:01 ST: Want to discuss these fallbacks 01:14:14 ST: We have to discuss alternative image map features for such simple epubs 01:14:22 ST: Any good solutions? Enjoy to discuss. Thank you. 01:14:56 TOpic: Discussion 01:15:01 Scribenick: dauwhe 01:15:29 Topic: questions 01:15:36 Shinya has joined #tokyows 01:15:44 q? 01:15:46 ack k 01:15:46 kaz, you wanted to mention possible collaboration with TTWG and MEIG about time-synchronized navigation 01:16:05 Kaz: I work for timed media group 01:16:24 ... there was discussion of time syncronized navigation 01:16:38 ... there should be joint discussion between TTWG and MEIG 01:16:45 ... we have been working on timed media 01:17:01 ... perhaps we could discuss during TPAC 01:17:11 ivan: we can try to fit into TPAC schedule 01:17:19 Bobby Tung: two questions 01:17:29 ... IDPF had region-based navigation spec 01:17:32 s/Bobby Tung/Bobby_Tung/ 01:17:35 SP: It was never really used 01:17:57 ... it's a fine line between too ambitious and not ambitious enough 01:18:01 ... too hard to implement 01:18:08 s/work for timed media group/work for media and entertainment group/ 01:18:23 ... it was part of AHL group which was a failure 01:18:29 s/navigation/navigation within your presentation/ 01:18:31 ... the use cases were not well understood 01:18:48 s/too hard to implement/too amgitious a standard is too hard to implement, not ambitious enough is not compelling or useful/ 01:19:01 s/between TTWG and MEIG/among the publishing groups and MEIG, also TTWG/ 01:19:03 s/understood/understood at that time/ 01:19:03 Bobby_Tung: some browsers support animated PNG 01:19:23 nmccull__ has joined #tokyows 01:19:48 ???: You were asking whether we were investigating new formats for animations in a file to replace GIFs 01:20:03 Bobby_Tung: the GIF format is too old, not enough colors 01:20:26 ... can we find a common file format for animated images? 01:20:44 ???: We're using aPNGs, as there is more capability for transperency 01:20:53 ... we need to allow for any kind of resource 01:21:01 ... it's not the job of the device to filter the formats 01:21:08 ... any formats should be accepted 01:21:23 ... the reading engine decides whether it can play it, and you need to provide a fallback 01:21:31 ... we are pushing for aPNG 01:21:32 s/???:/Florian_Dupas:/g 01:21:46 SP: he's an active member of the manga WG 01:22:02 r12a: what are i18n standards you're coming across? 01:22:19 ... there are differences in reading direction between japanese and english, and then there's mongolian 01:22:27 ... is there a market for RTL scripts? 01:22:40 ... the abspos stuff will be problematic if translated into RTL 01:22:48 ... what are the i18n barriers you've come across 01:23:04 laudrain: the text hasn't been addressed as text, it's image 01:23:23 ... that was a hope from AHL to manage image and text in same pub, but we haven't done that 01:23:33 rachelnabors_ has joined #tokyows 01:24:04 rachelnabors_ has joined #tokyows 01:24:27 SP: rising markets like Korea and US can lead to propriety formats 01:24:30 rachelnabors__ has joined #tokyows 01:24:44 ... we need next steps that are not too far, not too long-term 01:24:57 ... to quickly put in the market something standard, something open source 01:25:07 rachelnabors_ has joined #tokyows 01:25:15 ... it's not a response to your question, but it's why we need to start from what we have today, EPUB3 01:25:21 ... we have to build just above that, quickly 01:25:34 Makoto: I'd like to respond to Richards question 01:25:57 ... one example had RTL scroll, one had LTR 01:26:12 ... do you find one direction uncomfortable? 01:26:28 florian: I have a web-centric point of view 01:26:37 ... you say we need to solve from what we have now, which is EPUB3 01:26:42 ... but what we have is the web 01:26:43 tanarin has joined #tokyows 01:26:45 ... we should start there 01:27:01 ... when you did intra-page navigation some of it is already possible 01:27:23 ... what's missing in the web is transition between pages, as web doesn't have that concept 01:27:35 ... for intra-page nav are you looking at what is already in CSS 01:27:50 s/already possible/already possible, or soon will be possible, or would be reasonable to add to CSS or Web Animations/ 01:28:01 SP: it will be close to web, this will be in Laurent's preso 01:28:13 ... a web engine will need to read JSON 01:28:34 florian: that scares me when you say similar, rather than the same 01:28:45 llemeur: I will talk about this later 01:28:59 florian: when you said you are looking for simpler format for FXL 01:29:21 ... what if you start from the web, you can use HTML as container for images, and use scroll-snap and viewport images 01:29:35 ... have you looked to use modern HTML/CSS as a replacement for FXL 01:30:02 ???: it might be different for modern animated content 01:30:12 ... maybe we need both 01:30:33 florian: I was thinking we could use HTML rather than EPUB spine 01:31:12 ivan: one remark on your presentation 01:31:42 ... one goal of the Web Publications work (WPUB) is to introduce the idea of one "thing" on the web which has multiple resources 01:31:51 ... which might help with inter-page transitions 01:32:17 myles____ has joined #tokyows 01:32:20 ... also, WPUB can use any resource on the web as content, so we could have a sequence of images, just as we could have a sequence of audio books 01:32:33 ... the main resources could be audio files, or could be graphics files 01:32:55 Makoto: a remark from historical viewpoint 01:33:14 ... with FXL, we deviated from OWP, we abused spine and abused itemref 01:33:20 ... so scrolling can't use browser engines 01:33:33 ... the colleciton of pages is not html 01:33:45 ... so japanese manga engines do not use brower engines 01:33:58 ... a long time ago, B&N proposed something similar a long time ago 01:34:16 ... "if you already deviate from OWP, why not go all the way?" 01:34:20 ... just do images in spine 01:34:38 ... so now we have strange mixture of OWP and traditional representation. 01:34:44 ... I have a mixed feeling. 01:34:56 ivan: 01:35:44 tanarin has left #tokyows 01:43:04 myles____ has joined #tokyows 01:54:10 laudrain has joined #tokyows 01:57:31 toshiakikoike has joined #tokyows 01:57:59 tanarin has joined #tokyows 02:03:05 rrsagent, draft minutes 02:03:05 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 02:04:34 Shinya has joined #tokyows 02:04:53 myles____ has joined #tokyows 02:05:10 s/???:/Shinya:/ 02:05:20 rrsagent, draft minutes 02:05:20 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 02:05:39 Scribenick: fantasai 02:05:49 Topic: Standards, semantics, and sequential art 02:06:00 Pablo Defendini 02:06:14 PD: Discuss ... and drawbacks in ways that comics are created 02:06:19 rachelnabors_ has joined #tokyows 02:06:20 PD: digitalcomics.co 02:06:26 i/Standards/topic: Session 2 - Web-Centric Manga & Comics/ 02:06:27 PD: Common approaches to digital comics 02:06:32 PD: Panel by panel presentations 02:06:39 murakami has joined #tokyows 02:06:40 myles_____ has joined #tokyows 02:06:48 PD: Page of pritn comic is larger than most devices, problem on mobile devices especially earlier 02:06:56 JunGamo has joined #tokyows 02:07:01 PD: Can cut page into panels, view comic panel by panel 02:07:15 PD: Problem is that they undermine the storytelling experience by slicing up page meant to be viewed as a whole 02:07:23 PD: Another approach is Balak Framework 02:07:39 PD: Beyond adapting print comics for screen, take advantage of new medium 02:07:55 PD: Experiments by depciting time by layering panels on top of each other, or shifting them over time 02:08:06 PD: Limitation is no handling of varying viewport sizes 02:08:13 PD: ... 02:08:39 PD: Static page monitor is not scalable. Similar to old Web, best viewed on Internet Exploer -- best viewed on iPAd-sized device. 02:08:54 PD: Not a great experience for viewing comics created for print 02:08:59 PD: Have to letterbox it to fit 02:09:18 PD: Web designers have realized that targetting only one screen size, we design fluid scenes that can adapt to multiude of viewin conditions. 02:09:30 PD: Panel-presentation undermine full-page layout design, to reinforce the narrative 02:09:39 PD: Visual juxtaoposition of multiple panels on a page ... 02:09:50 PD: You can see story how it progresses bpanel by panel, 02:10:06 PD: But don't se relationship of the panels to each other on the page 02:10:24 PD: Anotther problem with comics is that they are essentiall photographs 02:10:35 PD: They are large files that take a long time to download, more expensive for reader and publisher 02:10:44 PD: Also loses semantics, not accessible. 02:10:54 PD: Also relies on print-centric conventions. 02:11:18 PD: E.g. this page shows a double-page spread. Double-page spreads enhance the reader experience in print 02:11:43 PD: But on a tablet, becomes a poitn of friction. Effect of largeness changed to smallness, or need to reorient tablet 02:11:50 PD: Need a new approach. 02:12:09 PD: Screen connected to internet has very different characteristics than digital devices which have varying viewport sizes and unpredictable viewing conditions 02:12:21 PD: Bandiwdth, language, and screen resolution are just some of the variables need to take into account. 02:12:35 PD: Can rely on Web development techniques for buildingcomics 02:12:46 PD: First, break the comic into constituent parts, so taht we can reassmeble in teh browser. 02:13:03 PD: Use HTML and CSS and responsive web design techniques, can build one page tha tcan adapt to a world where we don't know what is happening. 02:13:07 PD: Let me show you some dmos 02:13:32 PD: ... resolution-independent images (SVG) 02:13:46 PD: Here's a simple layout, using CSS to make it responsive, but all panels are exactly the same 02:14:01 PD: But using CSS Grid and Flexbox, we can do more sophisticaed layouts, but also collapse them into mobile-friendly layouts. 02:14:07 PD: You can explore on digitalcomics.co 02:14:15 PD: Next is live text. 02:14:35 PD: We can use live text instead of images of words. Text can be resized, searched, translated, and is more accessible. 02:14:45 PD: Makes globalized comics easier to create for publishers. 02:15:01 PD: Here you can see different examples, all live text in the word balloons. 02:15:06 PD: Can resize as necessary, and it keeps its layout 02:15:17 PD: Can move the word balloons around as you see fit, to adapt to different viewing conditions 02:15:35 PD: Can use search, highlighting, etc. Every advantage of real text. 02:15:52 PD: Finally, using resolution-independent artwork (vector images) makes comics accessible, lightweight, and scalable. 02:16:17 PD: Some things will always need be raster-based, but so many aspects of comics can be done with vectors 02:16:28 PD: Crisper images at all sizes, and lower bandwidth costs for users and publishers. 02:16:40 PD: You can see to-planes.com uses some of these techniques 02:17:09 PD shows a comic panel where the relationship of background/foreground shifts as there is more or less width for the panel 02:17:36 PD: Once you start building comics out of HTML and CSS, can recreate anythign that's been done on a physical page. 02:17:57 PD: What are the istorytelling implciations of mobile layout, tablet layout, desktop layout? 02:18:15 PD: Cliffhangers and reveals happen in different ways on different sizes. 02:18:23 PD: Use layout in service of the story 02:18:39 PD: Thank you. 02:19:25 Topic: A cool way to publish manga in Japan 02:19:33 OGATA Katsuhiro 02:19:40 Rich has joined #tokyows 02:20:08 KO: I am trainer in Pokémon Go 02:20:32 KO: Anyway, smaller company, agent company that also edits manga planning 02:20:42 KO: eBook initiative in Japan, Torico, Naver are clients 02:21:00 KO: Today I will tell you what I have [?] 02:21:24 KO: I did questionnaire on Twitter. How are manga delivered in japan? 02:21:34 KO: 23% images with rasterized text 02:21:46 KO: 20% balloons without text, and text files 02:22:03 KO: 57% compound format (psd, clip, mdp, etc.) containign ... 02:22:19 KO: What are the advantages and disadvantages of these three types of data? 02:22:39 KO: Image containing rasterized text (jpg, png, etc) 02:22:57 KO: Advantage: can be published immediately 02:23:06 KO: if there are no errors 02:23:19 KO: Disadvantage: If there are erros, you must ask the manga artist to correct it 02:23:33 KO: Also, Translation cannot be done 02:23:49 KO: Also, if manga uses non-commercial fonts, can be a big problem in a later stage 02:24:04 KO: This way should not be adopted. It is not more accessible than anythign else. 02:24:11 jkamata has joined #tokyows 02:24:21 KO: Next is image without text. Manga artist give text files to manga editors along with image files 02:24:28 KO; Image file baloons are blank 02:24:40 KO: The manga editors use the text file and associate text chunks with each balloon 02:25:00 KO: Advantages: Editors can correct mistakes themselves 02:25:10 KO: Organize text for easy reading for the reader. 02:25:17 KO: No worries about font licenses 02:25:24 KO: Disadvantage is that it takes a lot of time. 02:25:38 KO: It's a good way to work, but time consuming and boring work. 02:25:51 KO: Next is compound format, e.g. PSD 02:26:08 KO: Compound format containing both image and text 02:26:14 KO: 57% use this approach 02:26:28 KO: All have image data containing a text layer 02:26:44 KO: Editors can receive characters with the same position, font, and font size as the manga artist designed 02:26:57 KO: After proofreading, the editor outputs jpg/png/etc and publishes 02:27:18 KO: Advantages: Itis efficient becasue you can use text entered by the manga artist 02:27:27 KO: easy to use on internet, book printing, or translation 02:27:37 KO: As long as font used by manga artist and fonts by editors match, can publish 02:27:58 KO: Disadvantages: It is very rare for the manga artist to publish teh received data as they are, as fonts are differetn from delivery specifications 02:28:17 KO: clip and mdp are not stable data formats for deliveray. They are ismilar to RAW image data in photographs 02:28:32 KO: Danger that if you mistake the output setting a bit, dat different from a manga artits' intention will be created. 02:28:46 KO All of these formats are proprietary, so we cannot exchange data across vendors 02:28:58 KO: Conclusion, Japanese manga editors are exhausted with inefficent and useless work. 02:29:13 KO: Most efficient way is to agree on the type fonts before hand and use an image format containing text layer. 02:29:32 KO: If there is an open standard for image formats equipped with text layers, the life of Japnese manga editors will be easier. 02:29:36 KO: It might be SVG. 02:31:00 Topic: Advanced Techniques for Web-based Comics 02:31:05 Rache Nabors 02:31:16 RN: I used to work in comics, now in web development. 02:31:24 RN: Big fan of Japanese comics community, so special day. 02:31:34 RN: You've heard about layout today from our speakers. 02:31:51 RN: But stories exist on multiple ... 02:31:55 RN: Spectrum of storytelling 02:32:11 RN: We have static comics, and we have animated film, but it is a continuum, there are comics mixed with motion 02:32:18 RN: You've seem some examples today 02:32:23 RN: This is what a motion comic looks like. 02:32:29 RN: Can publish to native android, iOS formats. 02:32:39 RN: But don't have any HTML+CSS format 02:32:54 Rn: Here you are clicking through the comic. 02:33:02 RN: It's like a glorified storyboard. 02:33:12 RN: What makes comics exciting on the web is interaction component 02:33:16 RN: visual novels are doing this already 02:33:23 RN: And games are ultimate mix of animation and storytelling 02:33:40 RN: THis is an example of a visual novel / game / comic book ... hard to describe what it is 02:33:51 RN: It was all written as flash, but reproduced with images 02:34:00 RN: This is an introduction animation to a portion owhich is a game 02:34:17 RN: This is a portion where it suddenly turns into a game: collect inventory items to get to the next page 02:34:29 RN: So populare that kickstarter funded it 02:34:34 RN: THis has gone on to inspire other people 02:34:47 RN: This is a Russian artist who created comic inspired by Wizard of OZ 02:34:57 Rn: Here using Drag and Drop API to create a clean-up game 02:35:06 RN: In the past we needed flash, but no longer true 02:35:17 RN: Here is Emily Caroll, a horror cartoonist 02:35:25 RN: Uses links on images that take you to different comics 02:35:43 RN: Here is hobolobo, a sophisticaed comic with sound 02:35:52 RN: Really interesting examples come from comics who became web developers 02:35:59 RN: Richa nd sophisticated experiences 02:36:15 RN: This example turns a browser into a synthesizer. No imported media, wuicktime, etc. 02:36:32 RN: We have declarative animations with CSS, here's an example of alice in wonderland I made with adobe 02:36:38 s/adobe/?? 02:36:46 Rn: Very efficient animations 02:37:00 RN: For more sophisticated examples, use Web Animatiosn API working on by Mozilla 02:37:19 RN: Scroll snap 02:37:25 RN: with css-scroll-snap spec 02:38:08 RN: Pointer Events ... we don't know how user will interact with page, but pointer events gives a standard interface to accept such input whether by mouse or touch or future tech 02:38:21 RN: CSS and SVG also have useful filters like blur, opacity, hure-rotate, grayscale 02:38:31 RN: We saw how SVG can be used to make clear line work stand out 02:38:32 JC_Burie has joined #tokyows 02:38:45 RN: But can also use it with layering to create hgih-resolution contrast and low-resolution color 02:39:01 RN: If you layer SVGs and bitmaps -- high-resolution linework and low-resoilution art 02:39:42 RN: So you can have very hgih-resolution color graphics as well as ... 02:40:03 Rn: Also have , which can recreate many capabilities of Flash 02:40:24 RN: Here is ?? example, Neurotic neurons: An interactive explanation 02:40:29 Rn: Youc an interact with things on the screen 02:40:39 RN: This is a style of storytelling humans can finally do really well 02:40:48 RN: AnimationCC exports well to canvas, so very handy 02:41:01 RN: What is the problem with this, why do we not see these things everywhere? 02:41:12 RN: Flash gave one of the best interfaces for this, not the best ever, but very good 02:41:19 Rn: But Flash is not supported on phones or tablets. 02:41:36 Rn: after banned from iphone, browsers limit it on all devices 02:41:54 RN: but HTML+CSS+JS have evolved to include many of these capabilities 02:42:18 RN: But they are not very author-friendly 02:42:50 RN: THere are some tools that export to SVG, but they are very fragile, lost when company goes away, and not sufficiently ambitious 02:43:04 RN: Here is an example... it was created by google webdesigner 02:43:18 RN: But not responsive, not scalable, and not really capable of doing what was necessary 02:43:22 RN: real loss 02:43:34 RN: Adobe Edge Animate from the experimental line 02:44:05 RN: Existed long enough to be adopted by some artists, but then was shut down so leaving them with an outdated tool that is increasingly obsolete 02:44:15 RN; Every time a tool dies, we lose the content that it created. 02:44:22 RN: Open source tooling might actually live the longest. 02:44:37 RN: Ren'py is an open-source tool written in python 02:44:55 RN: This tooling platform is appealing enough that artiests learn enough to create and contribute to the community 02:44:58 RN: ... 02:45:03 RN: Javascript frameworks. 02:45:26 RN: This is a retelling of sleeping beauty. Uses a JS framework in teh background 02:45:51 RN: We have JS frameworks that should make building the next interactive framework easy 02:46:04 RN: Best part is that the foundations can be used for building fo native 02:46:28 RN: And frameworks like react/vue/??? can export to native as well as web 02:46:32 RN: ... 02:46:47 RN: Graphic novel that won awards, no reason this can't be done with Web technology 02:47:12 RN: There are so many things here that we can do on the Web, no reason that it needs to be limited to a studio in Toronto with a dedicated develoer team 02:47:18 RN: Web is the ultimate platform 02:47:25 RN: ApIs for sound, motion, interaction 02:47:34 RN: opensource JS frameworks ... 02:47:35 RN: ... 02:47:43 RN: Formats are cleverly put to use around the world 02:47:55 RN: Here is a comic training woment to avoid prolbmes in war-torn areas 02:48:15 RN: Here is a magazine-type storytelling using animation 02:48:28 RN: The Web provides a lot of opportunities for us. We don't know what it's limits are yet. 02:48:37 RN: Who knows what we have ahead of us? Lot of room for expansion. 02:48:41 RN: Thankyou~ 02:49:22 TOpic: Reading engines for Visual Narratives 02:49:33 EDRLab / Readium 02:49:57 jkamata has joined #tokyows 02:50:04 Laurent Le Meur 02:50:05 rrsagent, draft mintues 02:50:05 I'm logging. I don't understand 'draft mintues', kaz. Try /msg RRSAgent help 02:50:12 rrsagent, draft minutes 02:50:12 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 02:50:16 s/rrsagent, draft mintues// 02:50:19 LLM: We are about digital reading, but reading what? EPUB 3 and 2, reflow and ifxed layout 02:50:33 LLM: CBZ comics (zipped sequence of images, essentially used for scanned comics) 02:50:36 LLM Audiobooks 02:50:46 LLM: Web publications and EPUB [next version] 02:50:51 LLM: We want to read visual narratives. 02:50:57 LLM: What are visual narratives? 02:51:13 LLM: We have studied inside EDRLab a new format 02:51:18 LLM: Why a new format? 02:51:29 LLM: Fisrst, a guarantee of the visual experience as driven by the author 02:51:35 LLM: Author wants to express something in images, text 02:51:45 LLM: It must be multiplatform: want to ahve something that works well on native and on web 02:51:55 LLM: SImplicity of authoring 02:52:13 LLM: LLM: It would be good to have an author able to create some visual narrative, as we call it, with a simple text editor. 02:52:18 LLM: And it should work online and offline 02:52:37 LLM: Mobile first, but to accomodate digitized works based on printed works 02:52:44 LLM: Very serious about long-term preservation 02:52:59 LLM: A choice: we made a choice to work based on Web Publications 02:53:03 LLM: work done by W3C 02:53:15 LLM: You can see our work as an extension of web publication 02:53:19 LLM: It is exposed on github 02:53:40 LLM: Warning: this may hurt some web developers, because there will be no CSS, HTML, JS. JSON only 02:53:58 LLM: Please we remind we're talking about a exchange format that must be processed by both Web apps and apps with no web view 02:54:06 LLM: What we're doing is a sort of fuel for web applications 02:54:25 Willy has joined #tokyows 02:54:25 LLM: We're ddesigning JSON format with what the author wants to express 02:54:31 LLM: JSON can be embedded in a web shell 02:54:43 LLM: It's extension of Web Publication Manifest as developed by W3C 02:54:54 LLM: What the web application is using, getting the novel on the screen 02:55:04 LLM: If you replace HTML/CSS/JS with somethign that is native, same thing 02:55:18 LLM: You can replace the JSON content get a different visual narrative that is using the same web development 02:55:36 LLM: Take what the authors want to express, make it independent of Web work, of native work 02:56:02 LLM:You don't have the same problem as exporting only HTML+CSS+JS 02:56:13 LLM: can export just JSON, or export JSOn + HTMl + CSS + JS 02:56:26 LLM: We ahve been focusing on the most useful effects that we find in the industrly 02:56:41 LLM: Want to standardize transitions, scroll, parallax, what ?? had been talking about earlier 02:56:44 LLM: First, the model 02:56:56 LLM: Visual narrative: comics, manga, poetry, everything visua,l 02:57:03 LLM: It is made of pages, a step in teh reading experience 02:57:12 LLM: with fragments 02:57:21 LLM: and assembled into larger units, sections 02:57:25 LLM: How implement? 02:57:34 LLM: First some JSON like a web publication manifest 02:58:09 LLM: describes reading order, images, optional reasources 02:58:18 LLM: Add to this things like transitions between pages 02:58:26 LLm: Different types: crossfade, slide, wipe, split, 02:58:31 LLM: Or image squence or animated image 02:58:38 LLM: transitions can be assymmetric 02:58:42 LLM: other proerties by the suer 02:58:52 LLM: If you look at the reading order, you see some PNG, page 1, 2, 3 02:59:10 LLM: Add some properties, a transition property for the type of transition and its parameters 02:59:22 LLM; Very easy to express with any automated tool, even with a text editor 02:59:33 LLM: Transition is animated with images, which are listed 02:59:44 LLM: If we want to express a scroll, the scroll can be vertical or horizontal 02:59:52 LLM: there will be constraints on the screen, portrait/landscape 02:59:57 LLM: there might be some scaling needed 03:00:10 LLM: author wants to position the start point 03:00:21 LLM: here are some examples 03:00:27 LLM: fit to height 03:00:37 LLM: fit tor ratio 03:00:44 LLM: IF authro wants to start at 50% of the scroll 03:01:05 LLM: Can put snap points at 10, 20%, etc of the scroll, can just list these positions 03:01:17 LLM: If you want to have fragment-based navigation 03:01:31 LLM: We designed it to an ordered collection of fragments to drive the navigation 03:01:38 LLM: Reuse media fragments syntax 03:01:49 LLM: We just decided that no fragment can belong to two different resources 03:02:06 LLM: If you wnat to do it, you must have one image, a bigger image 03:02:21 LLM: Some things which were unsuccessful in EPUB3 were due to complexity, so we tried to simplify 03:02:33 LLM: You see the href here as a media fragment URL 03:02:43 LLM: You can add a transition from the first fragment to the second one, from the scond to the third 03:02:51 LLM: WE coudl add more transitoins, but want to keep it simple atm 03:03:00 LLM: Sections enable easy in-book-update 03:03:05 LLM: Express very simpliy 03:03:20 LLM: Instead of a direct reading order, have a reading order with this section 03:03:28 LLM: This section will come later, see. 03:03:36 LLM: a chapter which will be published later 03:03:39 LLM: Layers and Parallex 03:03:45 LLm: We talke daobut ext and image in layers 03:03:51 LLM: A page can be a collection of layers 03:03:58 LLM: A layer is an array of images (raster or vector) 03:04:12 LLM: Parallax is more complicated 03:04:33 LLM: We know that there are layers, but a speed that differs, different linear path, opacity, snap points & triggers, 03:04:44 LLM: At a certain position in the scroll, trigger a sound or some animation 03:04:50 LLM: More difficult to expres,s but it will come soon 03:04:58 LLM: We are also studying other features, like meatdata for comics 03:05:11 LLM: Alternate versions e.g. if you have something b/w and you wnat to go to color version 03:05:16 LLM: or from japanese to french version 03:05:28 LLM: Multiple renderitions still useful for many reasons 03:05:43 LLM: Accessibility, visual narrative in images, but you want to read it for somebody who is blind 03:05:51 LLM: Developing a native reader, it will be good using this model 03:06:02 LLM: You can do it with great performance e.g using a game engine 03:06:08 LLM: But if you are developing a web reader, you've got choices 03:06:22 LLM: ONe is DOM manipulation + (CSS or Web Animations API) + JS 03:06:34 LM: Or you can use a canvas and jsut do whatever you like 03:06:38 s/LM/LLM/ 03:06:48 LLM: Summary - there are narratives you can structure using JSON-LD 03:06:57 LLM: Using any kind of authoring software 03:07:03 LLM: with long term perservation in mind 03:07:17 LLM: Let developers create optimized reading engines, using the technology of today and technology of tomorrow 03:07:21 Thanks 03:07:37 Topic: Questions / Discussion 03:07:41 Scribenick; ???? 03:08:24 ??: Seeems to pub emphasis on interactivity on the Web. Reminds me of long tradition of ??? 03:08:24 speaker is Taro Yamamoto, Adobe Type 03:08:38 ??: Do you think the reason is future comics have anything to do with those traditions in the past? 03:08:42 scribenick: dauwhe 03:08:45 ??: If so, what do you think we can learn from the past? 03:09:01 s/??:/Taro:/g 03:09:07 paolo: interactive fiction is having a moment right now 03:09:20 ... we talk a lot about tech and tools 03:09:35 ... the fundamentals of how you write comics are the fundamentals, they are how you communicate 03:09:41 ... they're first principles 03:09:48 ... they apply regardless of technology 03:10:12 rachel: that's an interesting history I didn't know about 03:10:30 ... now is a good time to look back at those things, when interaction touched storytelling 03:10:51 ... and to come together across communities and cultures, so this current blooming is sustainable 03:11:05 laurent: when we talk about interactive stories 03:11:10 ... we try not to be too directive 03:11:26 ... the interattivity is the reading path between states 03:11:48 ... if we consider that interactivity goes further, like games, then we are in a different line of work and shouldn't go there 03:12:05 Rachel: pages are becoming more arbitrary 03:12:13 ... what is a page any more? what is a chapter? 03:12:20 ... media is becoming more like cinema 03:12:29 ... i'm inspired by the french turbomedia movement 03:12:49 paolo: a page is becoming increasingly arbitrary, as you said, but there's still value there. it's a tool. 03:13:06 ... you can use it as an author, you can guide stopping points 03:13:24 florian: we're still exploring 03:13:36 ... we see avant-garde artists creating beautiful work 03:13:47 ... the following generation will learn from the inventors 03:13:55 ... but they will be less deep in the technology 03:14:07 ... we need authors who aren't devs to be able to do the work 03:14:18 kida has joined #tokyows 03:14:23 ... and think of storing some of these things as HTML or SVG doesn't seem hard 03:14:26 q? 03:14:51 ... for other types of work, it seems harder, but you can put images on a grid 03:15:19 ... for the things rachel showed, it is much harder to think of how to have interchangeable html 03:15:31 ... but a lot could be done with HTML 03:15:51 ... or we can step out of HTML like laurent did, to define something that could compile to OWP stuff 03:16:04 ... do we want the web platform as authoring format, or as a delivery format? 03:16:14 ... by natural inclination is to be on the web 03:16:28 paolo: we're getting there. there are new tools bridging that gap. 03:16:40 q+ 03:16:42 ... the bridge between visual designer and front-end coder 03:16:44 s/to be on the web/to be on the web, but authoring tools fo the Web are *hard*/ 03:16:51 ... we're starting to see tools 03:17:07 ???: I have question about the tooling 03:17:15 ... rachel's point on open-source tooling is a good one 03:17:21 jkamata has joined #tokyows 03:17:30 q? 03:17:41 MikeSmith has joined #tokyows 03:18:02 ... but there's problems maintaining tools, especially when the market is small 03:18:04 naomi has joined #tokyows 03:18:07 ... you need a community 03:18:19 s/???/nmcull_/ 03:18:24 q? 03:18:39 laudrain: I'd like to react to florian re in the web 03:18:49 ... I don't see the EDRLab proposal as being out of the web 03:18:55 ... it's a different layer of abstraction 03:19:02 ... as an author I want to do a transition 03:19:14 ... if I am in html, I need to learn css transitions 03:19:34 ... but in intermediate language I can just describe my intent, and have it translated to any kind of application engine 03:20:14 ... this is not comparable... we can't compare the intent of the author ... I don't want it to have to be described in JS 03:20:31 ... today already it can be expressed in many ways 03:20:49 Laurent: i want to insist on that. You will team with a developer. 03:21:01 ... here, we want to say the developer is shared with different authors 03:21:09 ... one framework for many contents 03:21:21 ... it's not against the craft of building web pages 03:21:36 ... if something is out of the bounds of the framework, we'll do something custom 03:22:01 ... but if it's in the 80% of narratives, it will be quicker to use the framework, and it might be easier to maintain and preserve 03:22:27 ... it's a different way to work, but the achievement is just the same 03:22:53 Rachel: you mentioned the examples I showed might be beyond those existing formats 03:23:15 ... I would hate to think that we are the masters of the tooling already 03:23:23 ... when you build tooling, you are commodification 03:23:34 s/of the tooling/of the craft/ 03:23:37 ... designers are being split from developers, using tools like framers 03:24:07 ... we don't know what will happen next. I hope the authors of tomorrow will be inspired to do things that the tools can't do 03:24:20 ... and I hope we arrange things so the specs won't be a limiting factor 03:24:49 ???: to avoid a misunderstanding, what we are showing today we are not trying to do everything 03:25:01 ... we are just trying to list what recurs 03:25:16 ... there is tension between freedom of the web and industry, which seeks to limit production costs 03:25:36 ... what we have shown today is really a step for the industry to go further 03:25:46 ... it's a modest goal, with production cost always in mind 03:25:55 ... I'm coming from comics paper world 03:26:14 ... you have the same thing, with fanzine you do many things with original paper, silkscreen, 03:26:25 ... but as a larger publisher you focus on costs 03:26:36 Rachel: I like to get paid, too :) 03:26:55 ... I want to see experimentation, but monetization has to happen quickly 03:27:07 s/I like/Artists like/ 03:27:12 r12a: talking about monetization, we were talking about translation 03:27:18 ... in arabic/hebrew world 03:27:26 s/too :)/too :) We are on your side./ 03:27:34 ... I imagine pages can move in different directions 03:27:47 ... you can have responsible layouts that have pages move in different directions 03:28:06 ... in one demo there were very narrow speech bubbles, with japanese vertical text 03:28:27 ... in another example there were simple but connected speech bubbles, that assumed a text direction 03:28:33 ... is this an issue we can't get around 03:28:43 ... can we use tech to get around that? even in a single frame? 03:28:52 Paolo: I dont' think it's a fundamental issue 03:28:56 .... there's a tech solution 03:29:16 ... you can use media queries or something, and then show proper balloon 03:29:33 ... that stuff is intereestng, and speaks to opportunities rather than limitations 03:29:37 q? 03:29:50 rachel: I work for a large company that does lots of i18n. it can be done. 03:31:02 ???: the owner of comics 03:31:14 ... japanese comics use RTL 03:31:25 ... even in translation 03:31:27 s/???:/ogata:/ 03:31:41 ogata: english only is LTR 03:32:16 s/owner of comics/first of all, order of frames within comics is important/ 03:32:16 ... for a lot of people in western world are used to LTR progression 03:32:29 ... so to sell to the rest of world, should be in that order 03:32:38 ... but many people in the world are used to RTL 03:33:00 Paolo: that should be the decision of the person creating the work. 03:33:13 ... grid or flexbox would allow you to do that 03:33:25 ... if you mess with the stylesheets you can do either, depending on your intent 03:33:35 ... it's not a technical problem, it's a publisher-level problem 03:33:40 q? 03:34:05 kaz: I liked rachel's 2D diagram 03:34:25 ack kaz 03:34:41 we come back here at 2pm 03:35:13 s/diagram/diagram, and believe there should be many topics for collaboration between published media and streaming media/ 03:35:17 tanarin has left #tokyows 03:36:12 rrsagent, draft minutes 03:36:12 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html ivan 03:37:33 naomi_ has joined #tokyows 04:34:36 naomi has joined #tokyows 04:38:14 JunGamo has joined #tokyows 04:42:35 dauwhe has joined #tokyows 04:48:08 myles_____ has joined #tokyows 04:48:28 dauwhe has joined #tokyows 04:50:15 rodzvilla has joined #tokyows 04:56:15 Shinya has joined #tokyows 04:56:27 toshiakikoike has joined #tokyows 05:00:17 ivan has joined #tokyows 05:01:51 kaz has joined #tokyows 05:02:38 laudrain has joined #tokyows 05:02:51 myles_____ has joined #tokyows 05:03:30 jkamata has joined #tokyows 05:04:22 murakami has joined #tokyows 05:08:29 tanarin has joined #tokyows 05:10:32 Is no one taking minutes ? 05:10:38 Topic: ... 05:10:40 rrsagent, draft minutes 05:10:40 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 05:10:41 Huijing Chen 05:10:46 myles______ has joined #tokyows 05:10:59 HJ: CSS Shapes allows floats in shapes other than rectangles 05:11:10 HJ shows example of person cutout, with text floaing around 05:11:17 s/.../Rich Dynamic Design with Modern CSS/ 05:11:35 HJ shows example of text flowing down a rabbit hole for an Alice example. It shifts with scrolling 05:11:44 i/Rich/topic: Session 3 - Advanced Typography with Web Technologies 05:11:56 HJ: It gracefully falls back to rectangular float shapes when not supported in older rowsers 05:12:04 HJ: Writing Modes allows vertical text 05:12:11 HJ: Alters flow of text at block and inline level 05:12:14 Hyunwoo has joined #tokyows 05:12:20 HJ: writing-mode property 05:12:33 HJ: text-orientation alows upright or rotated typesetting in vertical lines 05:12:50 Shinya has joined #tokyows 05:13:00 HJ: text-combine-upright allows combining characters into a 1em space in horizontal layout (tate-chu-yoko) 05:13:31 HJ: With CSS it's possible to create a single document which can be rendered in either horizontal layout or vertical layout 05:13:53 HJ: CSS logical properties makes this easier, the same code for margins, padding, borders will work in both writing modes 05:14:09 HJ: A question in QA was about laying out content in different directions 05:14:22 HJ: Combination of writing-mode and/or flex-direction can determine the flow of content on your page 05:14:31 HJ: The content does not need to flow top-to-bottom 05:14:45 HJ: writing-mode changes the flow of text 05:15:02 HJ: Flex directions allow changing just the ordering of a set of boxes 05:15:12 HJ: Can go left to right, right to left, top to bottom, even bototm to top 05:15:20 HJ: and wrap into multiple lines 05:15:32 HJ: Another major devleopment is CSS Grid 05:15:48 HJ: Has been supported stably in major browsers for over a year 05:15:58 HJ: Allows placing items into a grid, and even allows overlap 05:16:39 HJ: It is easy to lay out elements on top of each other, and can use blend modes, transparency, and clip paths to create interesting overlapping effects. 05:16:57 HJ: Placing items on a page becomes as straightforward as placing items on a chessboard 05:17:15 HJ: and can be made flexible to stretch and fit different window sizes 05:17:35 HJ: Media queries allows significant changes in layout for different ranges of window sizes 05:18:02 HJ: Responsive images is another feature which loads different images, or different resolutions of the same image, based on the available space and screen resolution 05:18:37 HJ: Viewport units can be used to size items to a percentage of the viewport 05:19:00 HJ: Media queries can also choose between different aspect ratios, so layouts can be fluid within a range, but also be rearranged based on the orientation of the window. 05:19:15 HJ: ... 05:19:18 HJ: Thank you 05:19:47 Topic: Breaking Bad: The Dark Secrets of Web Typography 05:19:51 Dave Cramer 05:20:00 DC: I went to my first W3C meeting in ... 05:20:16 DC: Workshop on print, met Håkon and Bert and other mythical figures in CSS 05:20:28 s/in .../5 and a half years ago/ 05:20:38 DC: Dave Cramer, Hachette Book Grou, @dauwhe 05:20:47 DC: 5 yrs ago I went to another W3C workshop in Paris 05:20:59 DC: I worried that Web woudl be dominated by frameworks 05:21:04 DC: TOld to go to China next month for TPAC 05:21:17 DC: 5 years later at another w3c workshop , what has changed in 5 years? 05:21:22 murakami has joined #tokyows 05:21:28 DC: Jen Simmons describes history of web as going through phases 05:21:35 koji has joined #tokyows 05:21:38 DC: no design,flash, fluid layout, fixed-width layout, responsive design, intrinsic design 05:21:43 DC: But as publishers we can't just start using grid today 05:21:48 DC: First of all, our content is very big 05:21:59 DC: Here's a blog post that includes the entire text of moby dick in a single web page 05:22:11 DC: this image was ???? , i.e. 170m tall image 05:22:20 DC: Usability demands that we present content in more digestible pieces 05:22:25 s/????/Tokyo Tower/ 05:22:26 DC: pritn and epub use pieces called pages 05:22:34 DC: In epub world we can't use a lot fof modern web capabilities 05:22:35 huijing has joined #tokyows 05:22:46 DC: in original kindle, coudln't even put top margin and left margin on the same element 05:22:49 s/fof/of/ 05:23:04 DC: In spite of the best efforts of ppl in this room, big divide between world of publishing and wworld of the web 05:23:09 kida has joined #tokyows 05:23:13 DC: As publisher, I'm afraid to use parts of CSS even from 2.1 05:23:13 Willy has joined #tokyows 05:23:15 Yanni has joined #tokyows 05:23:26 DC: These are print book sizes *shows rectangles* 05:23:47 DC: On the web, can change the size of teh page in a second. In print world, takes 6 months to a year 05:23:53 DC: In my day job, set books in CSS 05:24:00 DC: Usually works ok< but there are some exceptions 05:24:05 DC: This book, for example, has annotations. 05:24:10 DC: But annotatiosn themselves have annotations 05:24:18 DC: We had to redesign this layout when we did the print 05:24:25 DC shows exampel from David Foster Wallace 05:24:33 DC: We never did an ebook of this one, because we couldn't figure out how 05:24:42 DC: Tried some experiemtns with grid, but many reading systems don't support this 05:24:50 DC: So stuck doing same simple things with ebooks 05:25:04 DC: This is a choose your own adventure novel, called Chose Your Own Disaster 05:25:12 DC: I made it more disastrous by setting right-to-left 05:25:15 DC: But simple isn't easy. 05:25:20 DC: It's more fun to talk about animations, shapes, exclusions 05:25:30 DC: But there's still a lot of undamental work to do in typography 05:25:37 DC: in ways that apply to books, print, and web 05:25:47 DC: Books have pages, to help not hurt the reader 05:25:54 DC: But sometimes things paginate badly 05:26:05 DC: Some breaks are ... , like at beginning of chapter 05:26:08 DC: Otehrs are contextual 05:26:16 DC: Try to avoid breaking in bad places 05:26:23 DC quotes from CHicago Manual of Style 05:26:27 DC: Don't remove title from a section, e.g. 05:26:36 DC: Need to describe when it's ok to split things up, when it's ok 05:26:42 DC: Browsers not very good at it currently 05:26:55 DC: But publishers are very aware of these problems 05:27:01 DC: My goal is to teach these things to browsers 05:27:07 DC: Many types of breaks 05:27:28 DC: Even a single line can break badly, ends up typeset too tight or too loose wen justified 05:27:33 DC: We don't have much control over justification 05:27:47 DC: Here's another problem, a short partial word at the end of the paragraph 05:27:54 DC: This is not great, various approaches to fixing it 05:28:06 DC: Would be really useful to have things like hyphenation exception dictionaries 05:28:12 DC: and other ways of solving problems 05:28:23 DC: Also have problems breaking pages 05:28:30 DC: Here is a widow, single line stranded at the top of the page 05:28:45 DC: CSS has a 'widows' property, to pull down another line of text so it's not alone 05:28:56 DC: But that breaks a more fundamental rule, that spreads should have the same height on both pages 05:29:20 DC: In this example, typesetter fixed that problem by tweaking a paragraph so that it wraps to an extra line 05:29:27 DC: Even on a larger scale, we want to optimize chapters 05:29:33 DC: WE don't want a chapter to end with one line of text 05:29:48 DC: Also see that kind fo thing that on the Web, you have a page with a scrollbar and it scrolls to expose one word. 05:29:57 DC: Or disclosure triange exposing just one word, or one or two calendars 05:30:05 DC: Sometimes think on scale of entire books 05:30:11 huijing has joined #tokyows 05:30:31 DC: Books are printed on giant sheets of paper, cut and folded to create a book 05:30:37 DC: So only certain multiples of pages are OK 05:30:48 DC: There's a nother level of optimization we don't know how to do yet 05:31:05 DC: On the Web scale, have milliseconds to redo a layout 05:31:14 DC: If I have a few days, like in rpint world, can do some nice fixes 05:31:19 DC: Slow books 05:31:28 DC: Thank you 05:32:07 Topic: The Versatile Web 05:32:12 Myles C Maxfield 05:32:24 MM: I'm an engineer on Webkit, member of CSS Working Group 05:32:31 MM: The Web is incredibly powerful, can do a huge number of things 05:32:37 MM: Go through a walking tour of amazing things it can do 05:32:59 DMM: Layout modes to describe your content layout, ypography, internationalization, responsive design 05:33:06 MM: CSS Grid -- it's really easy to get it to work 05:33:17 MM: Put display grid on your content, and your content will participate in a grid 05:33:25 MM shows off some examples from Jen Simmons 05:33:35 MM: There are additional properties that control spacing and positioning, but very straightforward 05:33:51 MM: Flexbox is similar, lines up items along an axis, can control spacing and sizing 05:34:07 MM: Multicol is also super easy: ask for number of columns, or preferred width of columns 05:34:16 MM: You can add this property 05:34:31 MM: CSS properties are additive, you can combine them together 05:34:46 MM: You can describe content in SVG, 05:35:05 MM: Letters in this green bar are described as vector images, always sharp. Looks great on Retina device 05:35:24 MM: Can use SVG to make infographics, diagrams, etc. using basic geometrical shapes 05:35:32 MM: MathML allows typesetting math equations 05:35:43 MM: Line Grids are something that have been around since dawn of history 05:35:56 r12a has joined #tokyows 05:36:03 MM: CSS proposal creates a grid with a signel declaration, asks lines to snap to grid 05:36:13 naomi has joined #tokyows 05:36:14 MM: Shapes allows content to flow around non-rectangular shapes 05:36:24 MM: Can choose a polygon, or draw a shape, or use an image 05:36:37 MM: exclusions are similar to shapes, but can put in the middle of your content 05:36:57 MM: Most of these things are additional properties, can have e.g. multicol layout with exclusions 05:37:02 MM: So typography 05:37:09 MM: Compex text shaping is done: browser just handles it 05:37:23 MM: ::First-letter allows stylling the first letter 05:37:34 MM: Can turn first line of content into small-caps 05:37:40 MM: drop-caps with 'initial-letter' property 05:37:52 MM: combining e.g. ::first-letter { color: red; initial-letter: 4; } 05:38:03 MM: Hanging punctuation 05:38:32 MM: The browser has knowledge about the language (if you mark it up) so can figure out correct set of rules to use 05:39:01 MM: Hyphenation is similar, 'hyphens: auto' turns on hyphenation using correct dictionary 05:39:10 MM: widowns/orphans control are another set of etting 05:39:17 MM: font-features allow improving yp9ographic quality 05:39:29 MM: Here are some examples: font-variant: diagonal-fractions, small-caps, 05:39:59 MM: font variations mean you don't have to choose between font-weight: 600 and 700, can use 697 if you want 05:40:12 MM: fill and stroke allow outlines on text, etc. 05:40:20 MM: can load color fonts 05:41:01 MM: Internationalization ... rtl text just works, can set base direction with HTML 'dir' attribute 05:41:15 MM: Writing modes allows top to bottom right to left, or top to bottom left to right 05:41:47 MM: Ruby markup allows ruby annotations, 'ruby-position' to change which side of the text 05:41:52 MM: text-emphasis can add dots 05:42:16 MM: Everything I talked about here ar additional CSS properties that the browser uses 05:42:23 MM: They all work together to create sophisticated layouts 05:42:33 MM: All of these are controllable conditionally, using media queries 05:42:33 s/ ar / are / 05:42:42 MM: Can switch from a grid layout to a flex layout 05:42:52 MM: or totally change layout between screen and print 05:42:56 MM: change colors 05:43:01 MM: disable animations 05:43:03 MM: etc. 05:43:37 MM: Relative units, media queries work great for discrete positions, but you cann change teh line height based on the browser window width, using more spacing for wider measures fluidly and automatically 05:43:51 MM: CSS variables 05:43:52 s/cann /can / 05:43:59 MM: Browser makes these features work seamlessly together, and that's what we do 05:44:00 s/teh/the/ 05:44:23 undamenta/fundamenta/ 05:44:35 s/ ypogr/typogr/ 05:44:52 Topic: Auto Font Alternating System 05:45:03 myles______ has joined #tokyows 05:45:15 Shinya has joined #tokyows 05:45:36 Satoko Takahasi 05:45:49 ST: Automatically use fonts to express text better 05:45:57 ST: USeful for printing but also for web and ebooks 05:46:04 ST: Typefaces are important for communication 05:46:12 ST: DNP research and development on typography 05:46:17 ST: Created font alternating system 05:46:24 ST: Firstly, I like to talk about the system function 05:46:38 ST: The system can automatically replace font according to topics of users's feeling 05:46:51 ST: For example, if I have tender words, display in rounded sans-serif typeface 05:47:03 ST: If I have japanese topics, I can display in japanes calligraphic typeface 05:47:17 ST: This shows an image that the system uses on messenger 05:47:22 ST: Left picture is regular system, basic font 05:47:33 ST: right picture is using our system, it is displayed in different fonts 05:47:38 ST: Next I like to talk about system features 05:47:50 ST: Just one, the system does this users motion from the sentence 05:48:01 ST: Also judges user's feelings from emoticons 05:48:08 ST: Users can also chooose other fonts 05:48:15 ST: If the system suggests a font, also users can choose anyotehr font 05:48:22 ST: You can edit each word to activiate auto replacement on th systme 05:48:29 ST: I'd like to show a demonstration 05:48:36 ST: We developed a prototype of the system 05:48:53 ST demonstrates by typing some words, automatically changed ot different font 05:49:07 ST: I type a word, happy 05:49:15 ST: I type about sushi 05:49:27 ST: I type about horror movie 05:49:37 ST: If you want to see more demonstrations, youc an watch a movie on youtube 05:49:58 ST: This shows the font list that the system is using 05:50:08 ST: System uses 12 fonts 05:50:13 ST: Chooses which word to replace with which font 05:50:21 ST: Here is example in English 05:50:26 ST: Next I'd like to talk about practical application 05:50:34 ST: This shows that image of the system used in chatbot 05:50:41 ST: THe system gives more humanit to the chatbot 05:50:57 ST: This shows that the image the manga-style messenger, using word balloons with different styles 05:51:04 ST: If the system used in ebook creation program 05:51:24 ST shows example of before/after the system for a manga panel 05:51:34 Basic font is replaced with more stylized one 05:52:02 s/Basic/... Basic/ 05:52:06 Thank you very much 05:52:30 Topic: Discussions 05:52:38 r12a: Have a lot of time for discussions, any questions? 05:53:00 FLorian: Not really a question, but a comment 05:53:10 s/FLorian:/Florian:/ 05:53:14 Florian: Many things in teh rpesetnations we saw now reminded me of what Jen Simmons said 05:53:28 s/teh/the/ 05:53:32 Florian: In print, we draw pretty things, decide exactly what the user sees 05:53:52 Florian: But in web, things change. But we are still in control. 05:54:08 Florian: The designer doesn't choose *one* view: designs many views 05:54:26 q+ 05:54:34 Florian: reader decides how theyr'e going to read, but author has not lost control, controlling different aspects 05:55:07 Kaz: I tend to agree with Florian 05:55:13 Kaz: Thank you very much for your presentation. 05:55:19 Kaz: was wonderign about emotion features for publishing 05:55:32 Kaz: we have some W3C specifications dedicated to marking up emotionts etc. 05:55:48 kaz: How to handle and how to record emotion information 05:55:51 myles______ has joined #tokyows 05:55:52 kaz: what bout combining emotions? 05:55:53 FlorianDupas has joined #tokyows 05:55:59 kaz: partly angry partly happy? 05:56:17 s/But in web, things change/In the web, it is more like a sculpture. You can fully design the document, you do not chose how the reader decide to view the document./ 05:57:00 kaz: My point I think is actual human doesn't have completely one emotion, can be kindof angry, kindof happy, kindof confused, kindof disgusted 05:57:07 kaz: That kind of combination 05:57:47 https://www.w3.org/TR/emotionml/ 05:58:23 kaz: (in Japanese) there is a stadnard to express mixed feelings (e.g. 20% surprised, 80% happy), which could be used as input to the dynamic font system 05:58:40 s/what bout/what about/ 05:59:03 TY: I'm very interested in this area of emotion expression and font substitution 05:59:05 q? 05:59:08 ack k 05:59:08 ack kaz 05:59:23 TY: But this type of technology implies, the mapping from one emotive expression such as angry anger or something to some font style 05:59:29 TY: This is one to one mapping 05:59:36 samuelpetit has joined #tokyows 05:59:48 TY: On the side of the recipient, according to the mapping selected by the system, the font style is chosen and displayed on recipient side 06:00:18 TY: But in order for this to be successful, the mapping itself should be based on common set of mapping relationships 06:00:26 TY: Should be commonly understood 06:00:41 Ty: The context of the mapping and semantic relationships should need to be commonly understood on both sides consistently 06:00:52 TY: otherwise emotive intent will not be correctly understood 06:01:07 TY: For example, you say I wanted to have sushi. 06:01:13 TY: The semantic is mapping to a style or font 06:01:22 TY: But I think maybe, he wants to ahve sushi now 06:01:39 TY: But what on the recipient side now, from notion of sushi might be different depending on place you live 06:01:50 TY: Sentence in Kansai, you may imagine a kansai style sushi 06:02:01 TY: but recipient maybe lives in Tokyo, and imagines tokyo style sushi 06:02:37 TY: So it is necessary for us to be able to evaluate faithfully, to what degree of fidelity, the intended semantic of a context can be conveyed from the sender to the recipient 06:02:50 TY: I think there will be many vague and difficult things, issues included in this kind of technology 06:03:02 TY: About this kind of difficulty I have now, I can imagine what do you think about this. 06:04:51 ST: Difficult to express... of course it's true that when sender sees something, and what other person gets might be different 06:04:59 ST: After awhile sender might feel something else 06:05:17 ST: Kindof experiment, throw a stone and see what happens. What kind of help to express this kind of emotion 06:05:35 TY: Too difficult to answer everything here but we should continue discussing it 06:05:49 IVan: I want to come back to the point Florian made at the beginning, about CSS-related things 06:05:57 Ivan: will play devil's advocate 06:05:58 s/IVan:/Ivan:/ 06:06:15 Ivan: Each of them is super easy, but as a user of CSS am overwhelmed. 06:06:37 Ivan: When I hear Dave say that there are certain elements of CSS2 that he's afraid to use... if he can't use it, I don't want to touch it 06:06:46 Ivan: Level of complexity that CSS has today that is frightening 06:06:52 Ivan: You see new modules coming up once a week 06:07:04 Ivan: I don't know where it ends, and how anyone can grasp its entirety 06:07:07 naomi_ has joined #tokyows 06:07:08 q+ 06:07:11 Ivan: ... 06:07:23 Ivan: Many things you can rely on them 06:07:24 Shinya has joined #tokyows 06:07:33 Ivan: No publisher can rely on MathML today. There is no reliable implementation. 06:07:40 Ivan: SOme browsers ignore it, some have partial implementation.. 06:08:03 Ivan: you spoke about hyphenation. I cannot rely on it, because not supported across the board 06:08:12 s/SOme/Some/ 06:08:13 Ivan: problem in the higher level things, don't know how to manage it 06:08:26 Ivan: In this community, it's a big problem 06:09:00 Dave: CSS2.1 comment was because epub reading systems are often homemade layout engines or are hacking the layout system so much that stuff breaks 06:09:15 Dave: That's not the fault of CSS, but result of how reading systems have evolved 06:09:57 MM: Because it has developed over decades and is additive, and can have progressive enhancement. DOn't have to have it all in your head. 06:10:07 MM: There are many pieces to the Web platform. Many implementations, not all support everything 06:10:15 MM: Every implementation would like to support everything but we haven't gotten there yet 06:10:33 HJ: Agree, you don't need to know every of the 503 properties we have now to get something to work 06:11:02 HJ: If you're reluctant to support properties because unsure of support, CSS offers feature query -- @supports rule -- to make some declarations conditional on support 06:11:07 HJ: View of digital as a platform 06:11:21 HJ: underlying view that we're trying to push forward is that the design doesn't have to look the same on every device 06:11:28 HJ: You give your user multiple perspectives on the same content 06:11:35 HJ: it is medium for transmission of content 06:11:49 HJ: Not practical expectation for medium like the web to look the same on every device 06:12:04 myles_______ has joined #tokyows 06:12:06 s/DOn't/Don't/ 06:12:16 HJ: It is much safer than before to use newer CSS properties to worry that lack of support to break your design, because means and methods to ensure that a decent experience can be had across any device regardless of whether old or new 06:12:24 HJ: to re-iterate Myles's point, you don't have to learn all of it to use it 06:12:41 DC: I'm in the same boat about browser support 06:12:53 DC: e.g. I looked at hyphens, it is supported everywhere xcept Opera Mini 06:13:01 DC: Flexbox and Grid were quickly adopted by all browsers 06:13:32 Florian: Did you mark up the language? 06:13:39 Ivan: Yes, but it wasn't French, it was Hungarian 06:13:47 Ivan: All languages are different 06:14:06 huijing has joined #tokyows 06:14:16 IVan: I understand all that, but nevertheless, we have a problem if it becomes very difficult for an average designer who is not deeply into the technology 06:14:26 s/IVan:/Ivan:/ 06:14:27 Ivan: to understand what is going on 06:14:42 Ivan: Get a partially-designed site from someone else, try to change/improve it 06:15:01 Ivan: Maybe it's a documentation issue, but something bothers me, that makes it overly complex 06:15:13 Florian: Won't try to pretend CSS is very simple. Many properties, lots of moving parts 06:15:22 Florian: But in another sense CSS has become simpler 06:15:38 Florian: We were in the past abusing CSS features that were not designed for what we're tyring to do, to build very complex layouts 06:15:48 Florian: Using floats and line heights and inline-block and all kidns of stuff to make this work 06:15:56 Florian: It was very hard, and had to teach each other complicated tricks 06:16:09 Florian: But it is no longer necessary, can directly express desired layouts in Flexbox and Grid 06:16:17 Florian: Doing the saem designs in Flexbox/Grid is much simpler 06:16:26 s/saem/same/ 06:16:30 Florian: So tools are more complicated, but answers to design problems are much simpler 06:16:42 Bobby: I remember being very excited that drop-cap was implemented by Webkit 06:16:50 Bobby: Finally it works, great to work with CSS 06:17:05 Bobby: but actually many systems were developed many years ago 06:17:26 Bobby: If one browser implements it, others will follow suit, but it's more complicated for epub reading systmes 06:17:30 Bobby: ... 06:17:54 Bobby: So publishers will be concerned to publish epub files with minimal typography, will not want to use latest features because it's not safe 06:18:05 DC: I like the idea of having the computer do the work 06:18:16 Rachel Andrew: To follow up from what Florian says 06:18:23 RA: I've been teaching CSS for 19 years now 06:18:30 RA: what we're gettin gnow is much more consisten tmodels, esp layout 06:18:39 RA: And that's making things an awful lot easier 06:18:45 s/Rachel Andrew:/Rachel_Andrew:/ 06:18:59 RA: I can get students to do in a day is way athead than what I could do 5 years ago 06:19:01 s/gettin gnow/getting now/ 06:19:13 s/consisten tmodels/consistent models/ 06:19:14 RA: So much easier than using tools not designed to do layout to do layout 06:19:30 RA: For ppl using CSS for a long time it's actually harder to learn, because have to unlearn first. 06:19:38 RA: But for new people, the basics are actually much easier now. 06:19:54 ????: About reading ssytems that don't implelent cCSS correctly 06:20:09 ????: Some reading systems are built from scratch. Have to implement all of CSS 06:20:12 s/????:/Laurent: 06:20:22 s/ssystems/systems/ 06:20:23 ????: Some reading systems built on >>> 06:20:30 s/cCSS/CSS/ 06:20:37 ????: Some reading systems built on a Web engine, and they implement all of CSS 06:20:45 s/athead/ahead/ 06:20:50 ????: So everything built on Readium and many other engines are using 100% CSS 06:20:55 r12a has joined #tokyows 06:20:57 s/????:/Laurent:/ 06:21:00 s/????:/Laurent:/ 06:21:01 ????: SO one can not say that most reading systems don't implement CSS, most do. 06:21:14 s/SO/So/ 06:21:23 DC: Also different markets have different mixes of implementations 06:21:25 s/????:/Laurent:/ 06:21:25 DC: .... 06:21:34 DC: Using webkit from 5 yrs ago is much different from Webkit from Last week 06:21:46 q+i12a 06:21:50 ack i12a 06:22:01 r12a: I understand where IVan is coming from, you're more deeply involved in CSS 06:22:16 r12a: There are new things that really simplified my life, but have to learn it 06:22:33 ?: Documentation is a big deal. I remember learning CSS and trying to figure things out 06:22:36 s/..../ Some of the older reading systems that have poorly-compliant rendering engines may have significant market share/ 06:22:49 ?: You go from one tutorial to another, where's the place where I can go to look at the spec, it's not really friedly for learning 06:23:07 Rachel Nabors: Role of design systems in CSS means that individual designers don't kneed to learn all of CSS 06:23:16 RN: Design specialists build much, and others re-use 06:23:28 s/Rachel Nabors:/Rachel_Nabors:/ 06:23:36 RN: You see this in open source frameworks. We're not rewriting CSS from scratch every single time. Collaborative system, each person does what they do best 06:24:02 Florian: Combination of CSS is easier due to better layout, and also progressive enhancement is good 06:24:19 Florian: In the past, doing an advanced design was a pile of hacks. If any piece didn't work, everything broke. 06:24:31 FLorian: With new capabilities, can have better graceful degradation. 06:24:53 Florian: Because using features in way that they were intended, the fallback is not as nice but is not totally broken 06:25:00 Florian: your content will still be there and be readable 06:25:17 ???: ruby 06:25:41 Florian: Ruby is a good example. IF system supprots ruby, get ruby annotations. If not support ruby, get aprenthesized annotations. Not as nice, but it still works 06:26:11 ??: ... move to EPUB 3, better typography than EPUB2. 06:26:19 ??: But take example of initial-letter, only in one browser engine 06:26:38 ??: How long do we wait for interesting specifications to be deployed, for features that are important to publications? 06:26:39 s/??/Luc/ 06:26:45 ??: It's a difficulty for us 06:26:57 s/??:/Luc:/ 06:26:59 Luc: Though we do our best effort to promote CSS as being more and more powerful, we have this difficulty 06:26:59 s/??:/Luc:/ 06:27:13 s/??:/Luc:/ 06:27:16 Luc: Anotherpoint, CSS works because of a programmer, an algorithm that applies. 06:27:26 Luc: I don't know if this algorithm is specified anywhere 06:27:28 Luc: Probably not 06:27:35 Luc: We don't speak about this 06:27:45 Luc: For the same CSS there may be some differences, because the engnes are different 06:27:51 Luc: I don't know if there's some work in W3C 06:28:05 Florian: initial-letter, yes, still missing from most browser 06:28:17 Florian: But if you're trying to build a document with CSS and trying to use initial letter 06:28:33 Florian: the reader may not see initial letter in one case, but the document is still there 06:28:48 Florian: Maybe you don't like that it's not there, you use the altherative: make JPEg of your page 06:28:56 Florian: But then it's urneadble on a phone because text is too tiny 06:29:00 kida has joined #tokyows 06:29:05 Florian: You can' tcontrol everything, but you get adaptability 06:29:09 JunGamo_ has joined #tokyows 06:29:13 Florian: Second question about algorithms, yes, this is what the CSSWG does. 06:29:34 Florian: Our job is to specify the features in extremely precise detail so that the implementations will all be the same 06:29:51 Florian: If there are differences, we investigate and make the spec more precise 06:30:00 Florian: to get the browsers to align 06:30:10 q? 06:30:21 Florian: if there is a point of non-itnerop, and the spec is ambiguous, then tell us, we will fix it. That's our job in the CSSWG. 06:30:30 koji: there is difference between browser world and epub world 06:30:43 koji: In browser world, there is some pressure to implement new features 06:30:58 koji: e.g. cnaiuse database, competing with other borwsers to match what they implement 06:31:05 koji: or in bug system, get requests for a featuree from developers 06:31:11 koji: but epub reader world, there is no such thing 06:31:18 koji: maybe W3C community can improve this 06:31:37 koji: create database to show which reading system uses which version of which engine, supports which features 06:31:55 koji: encourage users, dreading system devs, to update these systems 06:32:04 dauwhe: Testing is the big elephant in the room 06:32:09 s/dreading/reading/ 06:32:10 dauwhe: For EPUB 3, there was only manual testing 06:32:32 dauwhe: There are 50-60 different reading system, behaviors vary from platform to platform 06:32:39 dauwhe: EPUB community group is very aware of this 06:32:53 dauwhe: Wnat to put much more effort on testing and documentation, and encourage systems to support more of the spec 06:33:01 koji: It's not possible for any single person to create all this data 06:33:17 koji: Need to create an ecosystem, get vendors to particpate, to encourage vendors to implement new properties 06:33:26 dauwhe: Have had discussions with Web Platform Tests people 06:33:37 dauwhe: would love to run all the HTML/CSS tests on epub systems automatically, but a lot of work to be done there 06:33:47 q? 06:34:06 ack fantasai 06:34:15
06:35:06 rrsagent, this meeting spans midnight 06:35:35 tanarin has left #tokyows 06:40:05 tanarin has joined #tokyows 06:44:04 Willy has joined #tokyows 06:50:08 myles_______ has joined #tokyows 06:50:24 JunGamo has joined #tokyows 06:52:59 myles_______ has joined #tokyows 06:56:05 naomi has joined #tokyows 07:00:14 toshiakikoike has joined #tokyows 07:01:06 jkamata has joined #tokyows 07:01:35 myles_______ has joined #tokyows 07:01:43 samuelpetit has joined #tokyows 07:01:47 Florian: Next is a double session, internationalization and accessibility 07:01:58 Topic: Internationalization at W3C 07:02:01 huijing has joined #tokyows 07:02:28 r12a: The internationalization activity at w3c, called i18n for short 07:02:39 Shinya has joined #tokyows 07:02:42 r12a: We believe that the importance of the Web for all people of all countries of all languages 07:02:50 r12a: Work is divided into three areas 07:02:59 r12a: Language enablement -- to understand where gaps are for suers of the global web 07:03:07 r12a: Developer support - build standards and apps 07:03:10 r12a: And ??? 07:03:24 r12a: We have recently started the W3C Internationalization Initiative 07:03:37 r12a: Two goals, one to increase participation in W3C from underrpresented regions 07:03:49 r12a: Second, to increase sponsorship of i18n activities at w3c 07:04:06 r12a: We have some some sponsorships already, APL from Japan, MOnotype, Paciello Group, and Alibaba Group 07:04:11 r12a: Language enablement 07:04:20 r12a: Here are some of the things we're currently doing, going ot focus mostly on here 07:04:23 r12a: Language enablement 07:04:30 r12a: This is a fairly new thing, a language matrix 07:04:49 r12a: Across the top we have a number of categories of typographic features, such as line breaking, justification, etc. 07:04:55 r12a: Down the side weh ave a list of languages 07:05:02 r12a: Want to note problems in supporting these languages 07:05:19 r12a: Figure out featuers that need to be developed for CSS or SVG, provide the typographic information needed 07:05:28 r12a: From the current state, we have 32 languages that need work 07:05:35 r12a: for advanced publishing 07:05:45 r12a: Orange squares, 25, need work for basic features 07:05:52 r12a: 2 language that just don't work well on tehWeb at all 07:05:59 r12a: 47% still need investigation 07:06:12 r12a: So we're trying to find experts, to get the information of where we stand in supporting a world wid web 07:06:22 r12a: We started this work a long time ago with teh Japanese Language Requirements document 07:06:36 r12a: Develope a docuemnt that was not technology-specific, to simply describe how Japanese typesetting works 07:06:43 r12a: Then follow that approach for other langauges 07:06:55 r12a: Since then we have developed Hangue klreq, chinese clreq 07:06:56 naomi has joined #tokyows 07:07:04 r12a: Arabic alreq, Ethiopic elreq ongoing 07:07:20 r12a: We have indic ilreq, and I wrote a first draft of Tibetan tlreq 07:07:28 r12a: Breaking news is new Mongolian mlreq 07:07:37 r12a: Still need more help for all of these 07:08:03 r12a: These documents take awhile, and it's a lot of work. Not much happens in the meantime 07:08:19 r12a: So earlier this year, we had a rethink, and decided to produce a different doc, a gap analysis 07:08:25 r12a: Here's the Japanese Gap Analysis 07:08:47 r12a: Idea is to look at for a particualr set of languages, how each of these typesetting requirements to see what's supported, what still needs work 07:08:50 r12a: And to prioritize 07:08:54 r12a: both spec work, testing and implementations 07:09:09 r12a: Squares in Japanese, you can see it takes you to the proper place in Japnese layout gap aalysis 07:09:21 r12a: Can see how problem is solved, unsolved. 07:09:26 r12a: Figure out which is high priority items 07:09:39 r12a: I expect that in the future, more piecemeal progress 07:09:57 r12a: The next step, we still weren't getting enough participation in these activities 07:10:05 r12a: Third is networks 07:10:11 r12a: Example is Southeast Asian Task Force 07:10:14 r12a: We had nothing 07:10:23 r12a: The main thing was to gather experts, and ask them questions 07:10:45 r12a: We can see questions relevant to CSS, or other things, to get answers and have discussions, figure out necessary changes e.g. to CSS specs 07:11:00 r12a:Intend to roll this out to other task forces 07:11:14 r12a: People who paticipate in these task forces, get a notification relevant to their task force 07:11:21 r12a: Also have started tagging CSS issue and HTML issues and so on 07:11:35 r12a: If there are changes to such issues, also get notifications for those 07:11:38 r12a: Have an issue tracker 07:11:50 r12a: You can see a summary, can filter it to show what are teh questions we have about Mongolian 07:12:01 r12a: As it happens, the SE Asian TF is documenting some stuff 07:12:13 r12a: We have a Khmer Gap Analysis, Lao Gap Analysis, Javanese Gap Analysis 07:12:36 r12a: More breaking news, put a new Japnese Language Task Force infrastructure 07:12:58 r12a: To work on JLREQ errata, to publish new informative documents, create Japanese gap analysis, discuss issues 07:13:09 r12a: You can get involved as a follower or as a contributor 07:13:21 r12a: The amount of work needed is can be very small 07:13:24 myles________ has joined #tokyows 07:13:32 r12a: Also needed a place to find the information that's accumulating, so creating a text layout index 07:13:58 r12a: Each section talks about a typesetting aspect and links to requirements docs, other resources, spec links, tests, etc. 07:14:17 r12a: Also have a type samples repo, anyone can submit samples of typography in the wild 07:14:40 r12a: We also do Developer Support 07:14:53 r12a: We review specifications at W3C, send comments to specification working groups 07:15:09 r12a: We track those comments to make sure spec editors receive the advice they need, resolve the issues we have. 07:15:22 r12a: We have spec development guidelines to help sepc editors remember to accomodate i18n 07:15:37 r12a: and a self-review checklist to help them check on common i18n requirements 07:15:54 r12a: In development is how to transfer information about base direction and ???? 07:16:04 r12a: We also have a number of articles, for content authors preodminantly 07:16:09 r12a: Of how to sue internationalization tools 07:16:14 r12a: Here's an example of vertical text 07:16:34 r12a: On teh righthand side you'll see notes on whether thigns work in various browsers or not, other useful info for authors 07:16:44 r12a: We also have test suites, and results of those tests in major browsers 07:16:51 r12a: Again, we have a techniques index 07:17:03 r12a: Can drill down and find information on how to do things 07:17:22 r12a: We have an i18n checker, quickly check if you have made errors or other problems. Link to mroe information on how to fix 07:17:28 r12a: So, to finish, next steps 07:17:34 kaz has joined #tokyows 07:17:47 r12a: We need to widen particiation of experts in langue requirement groups 07:17:54 r12a: Significantly increase scope and output of language enable ment 07:18:05 r12a: Extend i18n test framework to support tests and paged media 07:18:10 r12a: Things YOU can do 07:18:12 rrsagent, draft minutes 07:18:12 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 07:18:21 r12a: Join a layout network to help provide expertise 07:18:26 r12a: Contribute to gap analysis 07:18:39 r12a: ... lists other ways to help, see slides ... 07:18:42 r12a: Thank you! 07:19:16 i/CSS Shapes allows floats/scribenick: fantasai/ 07:19:18 rrsagent, draft minutes 07:19:18 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 07:19:26 Topic: Implement Bopomofo by OpenType font feature 07:19:29 Bobby Tung 07:19:35 BT: What is Bopomofo? 07:19:49 BT: It is a phonetic system for Mandarin education in taiwan, and a major input method for Han characters 07:20:04 BT: it is typically written alongside Han characters, like Japanese kana ruby 07:20:12 naomi has joined #tokyows 07:20:18 s/ssytems/systems/ 07:20:19 BT: Rules for bopomofo are published online, fi you want to learn 07:20:25 BT: https://bit.ly/2w3LEph 07:20:35 BT: ... 07:20:40 BT: want to talk about how to achieve the correct layout 07:20:53 BT: HTML can mark up bopomofo correctly 07:21:05 BT: But positioning of charaters, particularly tone marks, is problematic 07:21:23 BT: There are several variants of markup, the best one for accessibility only supported by Firefox 07:21:24 s/???: ruby/Myles: ruby/ 07:21:27 BT: We ahve some issues 07:21:35 BT: Tone marks are encoded into Unicode 07:21:57 BT: Noto Hans Sans and Helvetical incldue these codepoints in their fonts 07:22:00 s/?: Documentation/Samuel: Documentation/ 07:22:02 BT: ... 07:22:10 BT: How to position tone marks in horizontal writing... 07:22:12 s/?: You go from/Samuel: You go from/ 07:22:18 BT: Tone marks are very small, but it's hard to read for readers here 07:22:27 BT: Vertical writing, the note mark should move to the side 07:22:39 BT: in some cases before the syllable 07:22:49 BT: I was told in CSSWG that the tone marks position should be buil twith OpenType features 07:23:00 BT: When found a good way, bring back to CSSWG for next step 07:23:22 BT: But I don't know anything about opentype. Don't know what opentype feature should be used. Do we maek a sample font for that? Should we add new features to OpenType for those? 07:23:29 BT: add browser feature for that? 07:24:15 BT: Somebody from Mozilla found the issue, harfbuzz OpenType engine fixed, and now works in Firefox 07:24:42 BT: But not others, so went and asked other experts for help... 07:24:57 BT: You can see, this is almost done. In vertical writing, tone marks are in the correct position 07:25:09 BT: We also received feedback from WikiMedia community in Taiwan 07:25:21 BT: They want to ... 07:25:29 BT: Recently we got everything done, so you can check the github repo 07:25:40 BT: We also filed bugs for Webkit, Blink, Edge 07:25:44 BT: You can see case numbers 07:26:02 BT: Dr. ? allow me to say that next version of Noto Sans and ?, will improve those features 07:26:16 BT: That's great because these fonts are widely-used open license fonts for Chinese 07:26:23 BT: Conclusions, font issues are outside W3C 07:26:30 BT: If there are font issues, don't know where to handle 07:26:42 BT: Should we have a font community group to liaison with CSSWG and OpenType etc.? 07:26:49 BT: Could we solve other CJK issues in the same way? 07:27:09 BT: For example, Every 5 years I come to Japan we talk about Kanbun issue, but no progress on it 07:27:30 BT: How to publish the solution in a standardized way, should it be an i18n note? Something else? 07:27:38 BT: Need browsers to see this information 07:27:46 BT: Many thanks for everyone who helpd this project 07:27:56 s/Dr. ?/Dr. Ken Lunde from Adobe/ 07:28:05 BT: Thank you. 07:28:09 Topic: Dicussion 07:28:16 /Dicus/Discus/ 07:28:32 Myles: Richard, you said two languages don't work well on the Web. Which two are they? 07:28:50 r12a: Might be 1.5, actually. ONe of them was Mongolian, and the reason I put that because the ? model ?? 07:29:09 r12a: We're not quite sure yet. there's no completely interoperable set of varinats across fonts (???) 07:29:12 r12a: So that's a half 07:29:17 r12a: The other one is Javanese 07:29:34 r12a: where they break lines on orthographic syllables, involves stacks and other things 07:30:00 r12a: and browsers dont' know how to deal with that. Since no spaces, text runs off the right hand side of the page 07:30:05 r12a: Thoes are the two I've found so far 07:30:11 s/ONe/One/ 07:30:40 Myles: Why did you choose to use font features to solve tone mark prolem, rather than other technology 07:31:05 BT: People in the CSSWG ... gave this advice 07:31:29 q+ 07:31:30 BT: Ask Japanese community, for me main layout issue for Taiwanese was bopomofo. Wanted to figure out what is the next issue to work on. 07:31:40 BT: tategaki was most important, but it's almost done 07:31:54 BT: What's the *next* most important issue for Chinese + Japanese typsetting, that we need to solve in W3C 07:34:19 fantasai: Wanted to first say thank you very much for following through on this issue of tone mark placement. It was not straightforward, and I am very impressed at how well you followd through to make sure it worked. 07:34:34 fantasai: secondly wanted to answer question of why this is a font feature not a layout feature. 07:34:39 fantasai: ... 07:34:43 BT: ... 07:35:07 Florian: Wanted to address issue of font community group. yes, we need a better liaison with font groups 07:35:27 Florian: OFten in CSSWG we realize there is some problem with OpenType format, or with how fonts are implemented, but we don't know how to follow up 07:35:39 s/OFten/Often/ 07:35:39 Florian: e.g. we are missing some baselines that we need to do initial-letter properly 07:35:52 q? 07:36:00 Murata-san: OpenType spec is maintained by Adobe and Microsoft 07:36:02 Murata-san: ... 07:36:19 kaz: Thank you veyr much for your presentation 07:36:35 kaz: I don't disagree with your approach, have a similar question to Myles 07:36:46 kaz: but, ??1.1 detailed specification 07:37:03 kaz: Maybe think about how to deal with pronunciation and metadata in addition to how to express the font would be useful 07:37:37 ... 07:37:59 BT: Bopomofo with right tone marks is correct for accessibility 07:38:01 kaz: .. 07:38:42 Shinya has joined #tokyows 07:39:36 rrsagent, draft minutes 07:39:36 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html ivan 07:39:46 Topic: When AI enters publishing process... 07:39:50 s/kaz: ../kaz: yeah. that's possible, and SSML 1.1 can use bopomofo or IPA pronunciation alphabet :)/ 07:39:50 Vincent Wartelle 07:40:05 VW: I was asked by ? to talk about the new project, artificial intelligence in publishing process 07:40:07 s/have a/but have a/ 07:40:33 VW: We'll talk about the ebook communication. We are fully committed to ebooks, creating epubs for education publishers 07:40:39 VW: Production of ebook community 07:40:50 VW: We'll see challenges and goals, why we chose AI 07:41:07 VW: Just a background, we're very happy to see that the digital textbooks or digital books should continue to grow 07:41:10 VW: as I mentioned 07:41:15 r12a-fallback has joined #tokyows 07:41:26 VW: But mroe happy to see textbooks, much more important. In France for example it's 38% growth 07:41:54 VW: Means use of digital textbooks is a growing market, and we have need of a lot of production features, because very specific market 07:42:16 VW: Our platform, we take a PDF, amke EPUB 3 with HTML and CSS. We have application to insert interactivity 07:42:19 s|but, ??1.1 detailed specification|for example, Speech Synthesis Markup Language (SSML) 1.1 https://www.w3.org/TR/speech-synthesis11/ has mechanism to handle additional metadata like pronunciation and tones| 07:42:27 VW: Textbooks have a lot of external resources for exercises etc. 07:42:36 WV: But ... 07:42:47 VW: Rich interactive ebooks. 07:42:51 VW: Proofing process 07:42:56 VW: Studio underlies the AI system 07:43:06 VW: Summarize, we focus on education, use epub3, fixed layout, and production 07:43:09 VW: Upcoming needs. 07:43:24 VW: We produce for French education publishers since 2013 07:43:33 s/Dicussion/Discussion/ 07:43:37 VW: smartphone market, especially emerging market, is something to handle in the future 07:43:39 rrsagent, draft minutes 07:43:39 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 07:43:46 VW: high demand for individual resources. 07:43:58 VW: Not enough to jsut have the book, can create a lot of resources from the book as well 07:44:14 VW: Need to build new service, Resources Database 07:44:24 VW: of resources to freely reuse by teachers and government 07:44:43 VW: Last we have to extend the usage to disable audience. Education means education for everyone 07:44:50 VW: So we have to address accessibility. 07:44:56 VW: It's very difficult to do that in the old fixed layout 07:45:04 i/Next is a double session/topic: Session 4 - Internationalization & Accessibility Concerns/ 07:45:06 rrsagent, draft minutes 07:45:06 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html kaz 07:45:15 VW:... 07:45:32 VW: When you reach education book, read in spreads, beatiful design work should be respected 07:45:54 VW: easy to automate, easy to add interactivity 07:46:15 VW: Problem we face is, because it is display-orientated based on the print world, really difficult to adapt to mobile. Not accessible, not at all. And not content-aware. 07:46:24 VW: Delivers a lot of content, but... 07:46:34 VW: That's why we began to create what we call Hybrid EPUB 07:46:39 VW: Just show a sample of that 07:46:50 VW: This is a book in our reading app 07:46:54 VW: This is an automatic book 07:46:57 VW: Two-page spreads 07:47:08 VW: we have something similar to a reflow system on top of spreads 07:47:19 VW: Inside a section of the page, that we've captured, zoom into a reflow view 07:47:26 VW: You can have text, and you can also have images 07:47:45 VW: But this here is a formula... rendered as an image. 07:47:57 VW:... 07:48:03 VW: This is done manually, and this is theproblem actually. 07:48:22 VW: So goals for tomorrow 07:48:34 VW: We build a reflow production plan 07:48:40 VW: Need to produce 300-400 books in 3 months time 07:48:48 VW: Books tend to be ready very very late, and need to deliver by September 07:48:54 VW: Need to be as responsive as possible 07:48:58 VW: Need to be accessible ready 07:49:03 VW: Semantics should be rich as well 07:49:09 VW: And of course has to be cost-effective. 07:49:15 VW: This is why the answer is AI 07:49:22 VW: We use Ai to help us build such a system. 07:49:31 VW: What we need to achieve, we need to know what we have. 07:49:39 VW: Things like this, we ahve simple boxes which separate text from image 07:49:58 VW shows a page with photos and some text in various areas, rectangles drawn around each and categorized as text box or image box 07:50:06 VW: You could also define boxes with semantic view on the page 07:50:09 VW: boxes within boxes 07:50:29 VW: you can drill into boxes, define boxes to extend between exercise instruction and image which is illustrative of exercise 07:50:34 VW: Second output is define classes 07:50:44 VW: Classes mean defining semantics, able to capture vusing analysis 07:50:51 VW: This is a simple branch of the page before 07:50:58 VW: Then you have to use different algorithm to do that. 07:51:05 VW: first is object detection, some already well=known algorithgms 07:51:12 VW: Then we have semantic segmentation, which uses FCN 07:51:22 VW: We have instance segmentation which is a mix of the 2 previous models 07:51:26 VW: and we have a natural language process.ing 07:51:42 VW: E.g. we need to understnad the words in the instructions, because, e.g. it links to another resource. 07:51:59 VW: E.g. instructions says "listen to ...", need to know that this links to another resource 07:52:10 VW: Third pointt is to set up mixed data sets. 07:52:15 VW: We have more than 1 million images 07:52:26 VW: We think we need another data set, which is web scraping. 07:52:42 VW: Some websites are very relevant for our algorithm, because they are already structured 07:52:47 VW: and ismilar to our research 07:52:51 VW: Database of exercises 07:53:03 VW: Would be interesting to see what is full range of exercises used in education 07:53:09 V: We could use similar data sets as ? 07:53:25 VW: It should not be exactly images of education book, but maybe ? or ? would be interesting to analyze 07:53:43 VW: So the team now, project started in July and team includes Data scientist which come from different background 07:53:52 VW: specialist of data learning 07:54:01 VW: We've made some integration of research laboratory 07:54:11 VW: we work with ??? which is the atomic energy research center in france 07:54:16 VW: and keen on data visualization 07:54:26 VW: We have ? which work on data alaysis 07:54:36 VW: And of course team of developers, which build the whole system to create a future 07:54:49 VW: So the roadmap that we have in mind is preliminary study that we've already started 07:54:54 VW: running datasets 07:55:02 VW: famewrok validation should be expected ... 07:55:11 VW: We're thinking to enter production in 24 months 07:55:25 VW: Thanks to our first clients éditions didier 07:55:30 VW: Thanks very much 07:56:19 Topic: Needs and solutions for visual rich publications to be indexable, accessible, searchable 07:56:22 Jean-christophe Burie 07:56:54 JC: ... 07:56:59 s/WV: But/VW: But/ 07:57:00 JC: Want to be able to index the content of comics 07:57:11 JC: The content of manga and french bands desinée 07:57:16 s/bands/bandes/ 07:57:29 JC: The content has much text and graphics 07:57:35 JC: However, descriptions are usually very semantically poor 07:57:50 JC: Publishers only provide some minimal metadata: title, author, editor 07:57:59 JC: Very dificult ot provide wide description of the content 07:58:10 JC: It is very time consuming, and no rule sin the publishng standards sfor semantic information. 07:58:33 JC: It coudl be interesting to have better access to the content 07:58:43 JC: We need to extract semantic content from comicgs, 07:58:48 JC: Why? New devices allow new interactions 07:58:57 JC: We can now have interaction with the user. We need tools. 07:59:02 JC: But we need to index precisely the content 07:59:13 JC: If we have to do that for each new album, it takes too much time. 07:59:21 JC: can we automatically do this? 07:59:25 JC: THis is what we tried to do. 07:59:33 JC: Comic books, it's not a trivial problem 07:59:50 JC: Ecah type have completely different styles, and each authro has own styles and own way to draw the characters 07:59:58 JC: So we have extra information, graphical information, everything is important 08:00:08 JC: ... 08:00:17 JC: Even for the text, we have many different presetnations styles of text 08:00:42 JC: Develop some ??? using AI and machine learning to understnad the content to index the content 08:00:51 JC: So, we have begun to tlook at this topic 7 yrs ago 08:01:06 JC: Here we have basic elemnet extraction 08:01:11 JC: Al this information can be used 08:01:17 JC: Want to understnad the content of the panel 08:01:27 JC: We have to figure out how to recgnize the text, so full text indexing 08:01:33 JC: We are able to detect the reading order 08:01:40 JC: succession of each 08:01:47 JC: Can create link between speech baloon and the character 08:01:58 JC: We try to recognize the character. Who is this? 08:02:11 JC: 5th, try to recognize the object or place of action. Is it in Tokyo? Somewher else? 08:02:22 JC: So this research concern both digitized comics 08:02:30 JC: Wehave many comics we can digitize, so what can we do ? 08:02:42 JC: Other comics are specifically created for digital 08:02:47 JC: We have some different approaches 08:02:53 JC: To be able to solve problems 08:03:14 JC: Figure out difference in style, e.g. between American comics, mangas, bandes-desinée 08:03:35 JC: We need a very rich language for description,to have keyword searches and interactions with the user on new devices 08:03:49 JC: .. 08:04:01 JC: These three are kind of format are able to index the parts of the comics 08:04:14 JC: Three examples are ComicsLM 08:04:16 JC: ... 08:04:21 JC: we decided to use them to index 08:04:31 JC: Comic Book Markup Language was proposed by John Walsh in 2012 08:04:44 JC: Description language using XML syntax 08:04:54 JC: CBML 08:05:15 JC: Here is the example of a respresentation of this page 08:05:51 JC: So description is able to describe the text and the author 08:06:03 JC: and we have some description of the whole page. Here is another one. 08:06:16 JC: You can see the captions and balloons 08:06:31 JC: Description of the balloon wo is speaking, etc. 08:06:46 JC: We have some tags to describe basic elements of the comic: panel, balloon, character, 08:06:53 JC: We also have some drawbacks 08:07:00 JC: Description is purely semantic 08:07:04 JC: No information on location of hte items 08:07:12 JC: Idea was to manually describe the content of the comics 08:07:22 JC: Also notpossible to descrie all the elements 08:07:31 JC: So we have to add some information 08:07:44 JC: Here we add information about the face, where is it 08:07:59 ... in the panel 08:08:10 JC: If you want to display adouble page, reading direction, etc. 08:08:18 JC: Well understood the content of the page 08:08:24 JC: We nee to know this information 08:08:24 naomi has joined #tokyows 08:08:33 JC: Drawbacks of CBML, it has been created to descrie digitized contents 08:08:44 JC: But born-digital contents, there are several layers, and sometimes short animation 08:08:57 JC: For which uses? 08:09:11 JC: Can create panel by panel reading for any document 08:09:29 JC: improve text-to-speech, braille translation, enhancing contrast of the text, or ad color of text for dyslexi people 08:09:49 JC: What you can do is t create services between reader and content, e.g. provide contextual information on character, place 08:10:02 JC: But we need to extract the maximal information to make this possible 08:10:09 JC: And we need a standard to describe all this information. 08:10:13 JC: Conclusion, 08:10:17 JC: content of comics is rich 08:10:18 Shinya_ has joined #tokyows 08:10:26 JC: New devices offer more opportunities 08:10:46 JC: Autmatic analysis is needed, but need to develop specific algorithms based on AI and machien learning 08:10:55 JC: Need a standard to index correctly the comics 08:10:57 JC: Thank you 08:11:06 ScribenicK: ??? 08:11:17 Topic: questions 08:11:23 q? 08:11:25 ack k 08:11:55 scribenick: fantasai 08:12:12 ??: Can W3C allow or improve the browser so you can implement multiple text-to-speech systems? 08:12:28 ??: ... 08:12:39 ??: I like to use when female speaks, a female voice, when male speaks, a male voice 08:12:48 ??: This is an easy question 08:12:53 ??: Seocnd I want to learn from the author view 08:13:02 q+ 08:13:04 Florian: I woudl liek to answer the first question. 08:13:17 Florian: There's a CSS module not about descifibng the visual layout, but the audio rendering 08:13:20 s/woudl liek/would like/ 08:13:22 FLorian: You can choose which voice, etc. 08:13:30 Florian: THe model is reasonably complete, but nobody has implemented it 08:13:37 JunGamo has joined #tokyows 08:13:42 s/descifibng/describing/ 08:13:53 q? 08:14:09 ??: ... 08:14:34 JC: It's an idea and we're thining about it. For now we're going to detect some characters. The next step is to rganize the characters, 08:14:41 JC: Describe this one is a woman, child, etc. 08:14:55 JC: We can imagine that we can do this, but we are not there yet. 08:15:00 s/??/Kamae/ 08:15:02 ack kaz 08:15:03 kaz: As former ? for Voice activity 08:15:14 kaz: Speech synthesis, can switch B and A 08:15:25 kaz; can specify lenght of ? and then 220 seconds 08:15:32 kaz: How to indicate that capability? 08:15:46 Ivan: It it something that's also implemented? Comes back to what Florian said 08:15:59 kaz: CSS has Speech module, but is kind of old capability but not really maintained 08:16:14 kaz: SSML 1.1 is not really maintained in CSS 08:16:24 Ivan: Is it something that works in browsers? 08:16:28 kaz: Yes. Via ?? 08:16:58 Ivan: The reason I'm asking that is, as I said sometime today, what we do now we realize that audio books is something newere that web applications handle well 08:17:05 Ivan: We need to add something to make that usable 08:17:16 kaz: How to integrate that with data publishing 08:17:20 Ivan: Something we need to discuss 08:17:40 ?: We work with a company called ???, wehave developed an API between rendering, automatic incorporation into EPUB3, etc. 08:17:55 ?: you have a feature which could say, this want to be spoken by a man, this one by a female. We use this already 08:17:57 s/former ? for/former activity lead for/ 08:18:03 StanC_Kono has joined #tokyows 08:18:19 s/B and A/speaker A (female) and speaker B (male) 08:18:20 Kamae: We do something liek this, bu tideally when in a comic there ar two guys or even girls fighting each other, sometimes like to mix two voices together 08:18:25 Kamae: In the picture can figure out 08:18:32 s/lenght/length/ 08:18:40 s/of ? and/of utterance and/ 08:18:56 ?: Need both of what we do, recognize what's happening and describe it to adapt for rendering 08:19:09 stan has joined #tokyows 08:19:28 s|and then 220 seconds|also can specify the length/speed of the utterance| 08:19:33 ?????: Very quick comment about navigation, just to say that the description of CML is have a very ? many many information i nthe CML, more than the basic stuff we have in the actual guided navigation 08:19:44 Topic: Closign 08:19:58 Ivan: we'll have a reception after this [describes logistics] 08:20:03 s/Via ??/Via speech api/ 08:20:31 Ivan: 6pm-8pm. So have a rest and the meet you there. 08:20:37 Meeting closed. 08:21:05 tanarin has left #tokyows 08:21:06 s/How to integrate that with data publishing/How to integrate that with data publishing would be the key/ 08:24:07 rrsagent, draft minutes 08:24:07 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html ivan 08:56:53 simon has joined #tokyows 09:01:50 naomi has joined #tokyows 09:39:12 naomi has joined #tokyows 09:45:01 naomi has joined #tokyows 09:55:53 naomi has joined #tokyows 10:17:42 naomi has joined #tokyows 10:22:32 Zakim has left #tokyows 10:28:45 naomi has joined #tokyows 10:39:33 naomi has joined #tokyows 10:56:21 naomi has joined #tokyows 11:03:22 Hyunwoo has joined #tokyows 11:07:17 naomi has joined #tokyows 11:15:18 naomi has joined #tokyows 11:20:06 naomi_ has joined #tokyows 11:23:12 naomi has joined #tokyows 11:23:49 Shinya has joined #tokyows 11:33:32 dauwhe has joined #tokyows 11:34:26 Shinya has joined #tokyows 11:37:51 Shinya_ has joined #tokyows 13:02:29 dauwhe has joined #tokyows 13:14:16 Shinya has joined #tokyows 13:17:12 Bobbytung has joined #tokyows 13:31:17 dauwhe has joined #tokyows 14:15:12 Shinya has joined #tokyows 14:36:51 kaz has joined #tokyows 14:41:10 yanni has joined #tokyows 14:41:35 yanni has left #tokyows 15:15:27 Shinya has joined #tokyows 16:23:20 Shinya has joined #tokyows 17:26:00 Shinya has joined #tokyows 18:27:38 Shinya has joined #tokyows 18:49:07 myles________ has joined #tokyows 19:34:32 Shinya has joined #tokyows 20:36:21 Shinya has joined #tokyows 21:45:44 Shinya has joined #tokyows 22:08:42 dauwhe has joined #tokyows 22:10:32 Shinya has joined #tokyows 22:12:57 Shinya has joined #tokyows 22:21:08 Shinya_ has joined #tokyows 22:22:03 Shinya has joined #tokyows 22:39:26 Shinya has joined #tokyows 22:39:51 Shinya has joined #tokyows 23:16:59 laudrain has joined #tokyows 23:25:35 dauwhe has joined #tokyows 23:29:01 naomi has joined #tokyows 23:52:36 Shinya has joined #tokyows 23:55:43 jyoshii has joined #tokyows 23:55:58 yanni has joined #tokyows 23:56:10 Zakim has joined #tokyows 23:56:50 tanarin has joined #tokyows 23:59:39 present+ 23:59:43 Zakim, who is here? 23:59:43 Present: dauwhe 23:59:45 On IRC I see tanarin, Zakim, yanni, jyoshii, Shinya, naomi, dauwhe, laudrain, koji, MikeSmith, fantasai, hober, birtles, RRSAgent, florian 23:59:56 scribenick: dauwhe 00:00:14 present+ Murakami 00:00:17 tommy has joined #tokyows 00:00:27 Topic: CSS Typesetting 00:00:37 ivan has joined #tokyows 00:01:09 Meeting: W3C Workshop on Digital Publication Layout and Presentation 00:01:09 present+ 00:01:29 Chair: Luc_Audrain, Florian_Rivoal, Makoto_Murata 00:01:35 rrsagent, set log public 00:02:22 JunGamo has joined #tokyows 00:03:02 rrsagent, this meeting spans midnight 00:03:15 rrsagent, draft minutes 00:03:15 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html ivan 00:03:57 toshiakikoike has joined #tokyows 00:04:32 florian: (introduction in Japanese) 00:04:41 Willy has joined #tokyows 00:04:57 scribenick: dauwhe 00:05:40 Murakami: I am Shinyu Murakami from Vivliostyle 00:05:49 ... my topic is CSS typesetting, 00:06:37 ... My slides are in HTML, and are an example of vivliostyle. It's not fixed layout, it's reflowable 00:06:56 ... here's the table contents with page numbers via CSS generated content 00:07:07 ... as the font size changes the page numbers change as the presentation gets longer 00:07:18 ... my background: developing typesetting languages 00:07:31 ... I developed XTR, a text formatter, in the early 1990s 00:07:49 ... I worked for AntennaHouse for 15 years, supporting both XSL-FO and CSS 00:08:17 ... now I work for Vivliostyle on CSS typesetting 00:08:26 ... CSS is print formatting of publications via CSS 00:08:32 jkamata has joined #tokyows 00:08:37 ... there is dedicated software, some using browsers and some not 00:08:43 ... many books are already made 00:08:53 ... technical books from O'Reilly Media 00:09:20 ... this article by Sanders Kleinfield shows how they work, using AntennaHouse formatter 00:09:42 ... the Japanese version of Lea Verou's CSS Secrets book was done with Vivliostyle 00:10:04 ... the layout is entirely html and css 00:10:29 ... Dave Cramer of Hachette uses CSS typesetting for trade books 00:10:37 ... and wrote about this on XML.com 00:11:04 ... manuals and catalogs are produced with CSS typesetting 00:11:12 ... these often use AntennaHouse formatter 00:11:22 ... another example is Wiley online journals 00:11:34 ... here's a sample using Vivliostyle 00:12:00 ... there are several CSS typesetting engines which convert HTML to PDF 00:12:44 ... the main commercial products are Prince, PDFReactor, AntennaHouse, and Versa-Type of Trim-marks Inc. (name changed from Vivliostyle) 00:12:51 ... Open Source engines include 00:12:55 ... WeasyPrint 00:13:06 ... Vivliostyle, which I work on 00:13:13 ... started with vivliostyle foundation 00:13:37 ... page.js, a new open-source project from pagedmedia.org 00:14:11 ... some formatters are based on browsers 00:14:29 ... they have the advantage of having browser support for most css standards 00:14:31 huijing has joined #tokyows 00:15:25 ... responsive or adaptive design is possible 00:15:41 ... houdini APIs can be used to make next-generation engines 00:15:56 ... but support for print and PDF is not good 00:16:17 ... quality is poor 00:16:23 ... there are problems with font embedding 00:17:11 ... can't embed open type/CFF fonts; they are embedded as type 3, which are not usually accepted by printing houses 00:17:26 ... they are limited to RGB color, instead of CMYK 00:17:44 ... due to subpixel rendering, Chrome cannout output thin border ( less than 1px) 00:18:01 ... and they do not support PDF standards like PDF/X1 or PDF accessibility 00:18:31 ... on the other hand, CSS typesetting engines that do not use browser engines have incompatibilities in which paged media drafts they support 00:18:48 ... Pagination on the web needs to be standardized 00:18:57 ... scroll vs pagination should be a user choice 00:19:21 ... in pagination mode, same page layout spec as printing should be used 00:19:25 ... thank you! 00:20:13 Topic: New Tools for CSS Layout 00:20:20 Rachel Andrews: a bit about me 00:20:27 ... I do web stuff 00:20:30 ... I'm a webdev 00:20:37 ... I've done a lot of teaching and writing about CSS 00:20:50 ... and I get feedback from webdevs back to the CSSWG 00:21:00 ... I want to introduce the major layout methods on the web today 00:21:27 ... we talk a lot about flexbox and grid, but we have other layout modes 00:21:40 ... and other concepts that brought things together 00:22:08 ... the problem today is helping people get past the old hacks 00:22:15 ... that we now have an actual system 00:22:28 ... we've got flexbox, for layout in one dimension , a row OR column 00:23:16 ... which depends on writing mode 00:23:42 murakami has joined #tokyows 00:24:07 ... alignment in flexbox is about distribution of space 00:25:43 ... we're thinking about logical directions, rather than left or right 00:26:16 ... flex is useful even to center single items in both dimensions 00:26:33 ... Flexbox came along first, and people thought it would solve everything 00:26:49 ... but people tried to use flex to make grids, as people had tried to use floats before 00:26:52 ... and that was fragile 00:27:05 ... but now we have CSS grid, for proper two-dimensional layout 00:27:16 ... in rows and columns 00:27:39 ... the things you learn from flex carry over from grid, like box alignment 00:27:52 ... grid allows layout on block and inline axis at the same time 00:28:06 myles________ has joined #tokyows 00:28:07 ... you define grid on a parent 00:28:24 ... here we're using the fr unit 00:28:46 ... the direct children of the grid container become grid items 00:29:29 ... be sure to use the firefox grid inspector if you work on this 00:30:10 ... the same alignment properties I used with flex work for grid, too 00:30:20 ... like justify-content and align-content 00:30:54 ... note I'm using inline-size and block-size rather than width and height, so we can easily change writing modes 00:31:53 ... the alignment properties give you a consistent way of aligning things, whether in one or two dimensions 00:33:31 ... this is a true system for layout! 00:33:37 ... for the first time. 00:33:52 ... flex, grid, multicol have consistent sizing, they all use box alignment 00:33:58 ... you can create a design system 00:34:12 ... this element should be flex, this one should be grid... and they can all line up. 00:34:17 ... it makes my job easier. 00:34:37 ... CSSWG is now working on subgrids for level 2 of grid 00:34:43 ... I've written an article on subgrid 00:34:51 ... what's next? 00:35:00 ... logical properties and values 00:35:15 ... Firefox has the best support at the moment 00:35:46 ... what's next? Box alignment in block layout. 00:36:14 ... and I want to know what's important to you? 00:36:22 ... I think regions is a missing piece 00:36:30 ... what are you struggling with? what hasn't been solved yet? 00:36:41 ... all my examples and code are at the URL on the slide. 00:36:45 ... thank you! 00:37:31 Topic: Designing CSS 00:37:43 fantasai: I'm on the CSSWG for the last 14 years 00:38:03 ... I'm going to talk about designing CSS, rather than designing with CSS 00:38:10 ... I've worked on a lot of specs :) 00:38:20 ... we have some principles of web architexture 00:38:29 ... 1. web is cross-device and cross-platform 00:38:45 ... it should adapt to screens, braille, terminals, print, speech, etc. 00:39:08 ... it should adapt to lores, highres, big screens little screens 00:39:22 ... it needs to be cross-platform. 00:39:36 ... it should adapt to Mac, Linux, Windows, mobile OSs, etc 00:39:47 ... it has to work on multiple implementations 00:40:01 ... it should work on gecko, presto, trident, webkit, servo... 00:40:15 ... new tech for the web should work on multiple browser architectures 00:40:31 ... it has to work with different input devices--mouse, keyboard, voice... 00:40:39 ... 2. The web is the world-wide web 00:40:54 ... it needs to work for all writing modes, all languages, and handle hybrids 00:41:01 ... like mixing languages in documents 00:41:30 ... we might not mix mongolian and hebrew, but we do see arabic and chinese quite a bit 00:41:57 ... 3. It must be forward and backward compatible 00:42:12 ... it needs to be forward-compatible with future features 00:42:22 ... adding new stuff shouldn't break existing implementations 00:42:31 ... forwards-compatiblee parsing 00:42:42 ... so you just discard stuff you don't understand when parsing 00:42:57 ... if you don't recognize things, just skip over it and keep going 00:43:06 ... and we have levels not versions 00:43:46 ... the web has one format, which are decades old 00:44:04 ... we can add features, we can refine slightly, but we can't change existing stuff because it would BREAK THE WEB 00:44:21 ... 4. No Data Loss 00:44:52 ... our goal is by default you see all the things 00:45:01 ... visible by default, readable by default 00:45:10 ... 5. Separation of content and style 00:45:20 ... html for content and structure, css for presentation 00:45:34 ... css is a bunch of annotations on the html 00:45:37 ... why? 00:45:53 ... efficiency. putting font tags on every page takes a long time. We tried that and it wasn't fun 00:46:03 ... maintenance. better to fix things in only one place. 00:46:19 ... memory and bandwidth. extracting common elements into a single file avoids repetition 00:46:46 ... accessibility. this allows better support for speech and search; the semantics don't get distorted by styling considerations 00:47:21 ... variability. you can change your design over time. 00:47:38 ... your blog might go through five redesigns, but you don't have to touch the markup 00:47:44 ... how do we do this? 00:47:57 ... we thing about what parts of rendering are structure 00:48:20 ... here's an example from ruby 00:49:55 ... where we can use CSS to choose between different methods of displaying ruby, although the underlying annotation markup is the same 00:50:25 ... here's CSS Zen Garden from a long time ago, which demonstrated the separation of content and style 00:50:35 ... and people submitted different styles for the same content 00:51:11 ... so these five premises are our foundation 00:51:22 ... our fundamental goal is accessibility of information 00:51:41 ... constraints of CSS 00:52:06 ... you're desiging a layout size where you don't know the display size or orientation, you might not know the content, or the fonts, or the language 00:52:31 ... you need to create beautiful layouts with no post-processing 00:52:45 ... so we have design principles 00:52:55 ... 1. Flexible. They can't be based on fixed sizes. 00:53:15 ... 2. Powerful. We want interesting layouts that help us understand complex information 00:53:39 ... 3. Robust. It should't break if something goes wrong, like a missing font 00:53:52 ... 4. Understandable. 00:54:04 ... 5. Performant. This pages are loading in real time. 00:54:19 ... how do we do that? 00:54:28 ... here's an example of multi-col layout 00:54:58 ... you can say you want two columns 00:55:19 ... or you can say the columns can be a certain width, and the browser makes as many columns as will fit 00:55:26 ... you could limit the max number 00:56:11 ... here are initial letters, where there's a lot of calculation but you want it simple for the author 00:56:16 ... so we use font metrics 00:56:30 ... and we make sure we avoid overlap 00:56:38 ... we use automatic sizes in CSS 00:56:53 ... here's Jen Simmon's reinterpretation of an old graphic poster 00:57:03 ... but her version is adaptable to different sizes 00:57:07 myles_________ has joined #tokyows 00:57:27 ... with min-content and max-content and auto 00:57:32 ... design pitfalls of CSS 00:57:36 ... 1. Iterative layout 00:57:42 ... 2. Unsolvable constraints 00:57:47 ... 3. Expensive algos 00:57:51 ... 4. data loss 00:57:57 ... challenges: shape inside 00:58:16 ... what happens if you have text inside. what happens if the font gets bigger. How do you avoid overflow? 00:58:26 ... exclusions have a similar problem 00:58:39 ... where a cycle may be created 00:59:37 ... we want to do regions, but the current proposals require empty elements, which violates separation of content and style 01:00:05 ... the initial grid layout had overlap problems, but we figured out something different which met CSS's design criteria 01:00:29 ... one web for all. 01:01:03 keiko has joined #tokyows 01:01:09 天下一网 01:01:14 naomi has joined #tokyows 01:01:23 Topic: Advanced CJK typography, from DTP to Web Layout 01:01:41 Nate McCully: I work for Adobe Systems 01:01:50 ... I'm going to talk about advanced CJK typography 01:01:57 ... and give some background 01:02:31 ... if your goal for web and css rendering is accessibility and legibility you might not be interested in what I'm saying, because we've accomplished that 01:02:54 ... but there's been lots of evolution in CSS, the expression of art in the presentation of text and images 01:03:00 ... the goals are shifting and changing 01:03:20 ... we can worry about details now 01:03:48 ... CSS gives us lots of cool controls over layout 01:04:01 ... why are so few Japanese websites taking advantage of them? 01:04:16 ... what is it about graphic design in japan that makes it difficult to do in HTML/CSS? 01:04:27 FlorianDupas has joined #tokyows 01:04:41 ... maybe the level of detail is difficult for CSS? 01:04:44 Let's look at some examples 01:05:06 ... I googled beautiful web design 01:05:57 ... but this site is not particularly beautiful 01:06:02 ... with horrendous typography 01:06:17 ... it's the lowest common denominator 01:06:34 ... here's a site for hot springs 01:06:46 ... where the print brochures are very high-design 01:06:57 ... but on the web it looks great, but it's images not life text 01:07:20 ... and the text has some problems--horizontal comma in vertical writing, for example 01:07:46 ... so I asked a friend, who pointed me to a different site 01:07:55 ... which has much better vertical text 01:08:20 ... but each thing is a span, with lots of negative letterspacing 01:08:31 ... and it reminded me of desktop publishing in the 19990s 01:08:37 s/999/99/ 01:09:00 ... in Quark and InDesign, every run of text had be hand-kerned 01:09:12 ... because the programs didn't support Japan's design language 01:09:18 ... so we set out to fix that 01:09:22 ... we've been here before 01:09:28 http://sosus.co.jp/ 01:09:31 ... so we can learn about what the web can do 01:09:45 ... in the 90s, DTP still lacked critical features 01:09:49 https://tadaya.net/ 01:09:51 ... the fonts had problems 01:10:03 ... everything used roman baselines 01:10:09 ... origin was in the wrong place 01:10:40 ... Grid layout in DTP 01:11:37 ... there was an exchange of ideas between Euro and Japanese grid systems 01:11:58 ... but the grid systems in DTP software wasn't good enough to do what phototypesetting operators in japan were doing 01:12:16 ... they were using the em-box 01:12:40 ... there was an offset from the bottom of the embox to the roman baseline, which caused trouble with digital fonts 01:13:41 ... we looked at people in Japan using proprietary systems what they used 01:13:56 Shinya has joined #tokyows 01:14:00 ... they showed us a grid based on body-text sizes, so there was an implicit character grid 01:14:14 ... everything else is sized relative to the character grid 01:14:19 ... the units were in millimeters 01:14:45 ... or units that would convert to mm (q) 01:15:05 ... so there needs to be a way to express design in emboxes 01:15:13 ... DTP evolved 01:15:40 ... it's all about control of white space 01:16:40 ... even the initial opening dialog in InDesign which asked for margins did not help people. the margins came from the design, not before the design 01:16:55 ... here's some calligraphy, which says "steep cliff" and you can see it in the calligraphy 01:17:42 ... the interplay of space is very important 01:18:14 ... I'm interested in history, and so looked for analogs from before typesetting 01:18:43 ... even ads today have very focused white space, following a set of rules which are NOT ascent/descent/baseline 01:19:28 ... we don't yet have consistency between browsers 01:19:48 ... the designer needs to express their intent as input to the algorithm 01:20:15 ... every result must be faithful to the design, which means we need better layout algorithms and standards 01:20:54 ... and there are still missing components 01:21:21 ... like having actual japanese font metrics rather than using latin metrics 01:21:44 ... thank you! 01:22:27 Topic: questions 01:22:37 Laurent: re: paged media 01:22:45 ... we are readium developers 01:22:54 ... we have to do dynamic pagination for EPUB in reflow mode 01:23:16 ... CSS paged media we would like to use it, but we can't because there's uneven support of the technology in the browsers 01:23:31 ... no support for size property in paged media, for example 01:23:40 ... so in readium we use multicol to paginate 01:23:52 ... and the implemenations are flowed, especially for i18n 01:24:10 ... we can't stack pages horizontally in vertical writing, except in safari 01:24:14 JunGamo has joined #tokyows 01:24:35 ... but we don't see much movement from the browsers 01:24:48 ... we want publications to be first-class citizens of the web 01:25:09 ... but we need some basic features evenly in all browsers, and CSS paged media is one of the technologies, along with grid and flex 01:25:33 ... we need implementations too 01:25:42 fantasai: I agree :) 01:25:58 ... the problem is that most browser devs are not excited about this 01:26:21 ... they don't percieve the need from their customer base, as they don't see ebooks as their issue 01:26:30 ... it's been a low priority for my entire history 01:26:55 ... the only progress was when HP had a rep on the CSSWG and working on the spec, and paying a dev to fix printing bugs in Mozilla 01:27:03 ... Apple is the most interested, because they have ibooks 01:27:22 ... my advice is to follow the model of the japanese publishing industry used for writing modes 01:27:34 ... getting in front of browser dev teams, saying we are your customers 01:27:45 ... and so the devs and their management understand 01:28:12 ... and they also needed to put resources into underfunded activities like building a test suite and sponsoring spec work 01:28:22 ... it was a big project, and japanese industry helped make it happen 01:29:03 Florian: I agree with both of you 01:29:18 ... the difficulty with multicol and columns going to the wrong place 01:29:24 ... it's a problem on the web too 01:29:46 ... I have a half-written draft of a cleaner webkit fix 01:30:11 ... if it's only happening because of interested individuals, it will move slowly 01:30:25 ... you need resources to push things forward 01:31:24 ... there are companies that work on browser engines that could be paid like Igalia 01:32:16 laudrain: someday it might be possible to do very sophisticated layouts directly in HTML and CSS 01:32:52 ... another pass would be as all these sophisticated books are done in InDesign, would it be possible to imagine a conversion of an InDesign page layout 01:33:09 ... to convert it to HTML/CSS but maybe it will lack some implemenations 01:33:34 ... and then this conversion could give us a pretty good version of the page as it is in InDesign 01:33:49 ... and then it will adapt automatically 01:34:07 ... is this something we could figure out? 01:34:18 Nate: I would love for that to happen 01:34:46 ... but designers who care about design intent in print often don't understand fluid design 01:35:21 ... we need to help the design community understand that dynamically changing design needs tools like the grid inspector 01:35:39 ... the coding of each css feature is still unreachable to many people 01:36:09 ... manga and visual storytelling, maybe they're already in that mindset, placing a dynamic thing into a 2d model 01:36:18 ... those are the people who will figure this out 01:36:52 Rachel Andrews: the problem with visual builders of web stuff 01:37:15 ... we have the same issue with dreamweaver or wysiwyg HTML editors 01:37:21 ... and then they freak out when it changes size 01:37:35 ... it's hard for the tools to help with adapting stuff 01:37:42 ... maybe it's easier now we have grid 01:38:02 ... they think the example layout they design will be seen by everyone 01:38:26 fantasai: I don't think that converting from InDesign to what you talk about 01:38:33 ... it's built on fixed-size boxes 01:38:37 .. and regions 01:38:56 ... and we don't have those things in CSS 01:39:04 ... the reflow in CSS is very sophisticated 01:39:11 ... that can't be expressed in InDesign 01:39:19 ... you could probably do media queries and scaling 01:39:30 ... but when you have overlap or flex fractions, and minmax 01:39:55 and different levels of squishisness, indesign doesn't know about that 01:40:08 ... but I don't think that InDesign is the tool for this 01:40:24 01:40:38 rrsagent, draft minutes 01:40:38 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html ivan 01:40:45 JunGamo has joined #tokyows 01:40:50 Shinya has joined #tokyows 01:40:53 tanarin has left #tokyows 01:45:18 tanarin has joined #tokyows 02:02:39 naomi has joined #tokyows 02:03:32 Shinya has joined #tokyows 02:04:39 myles_________ has joined #tokyows 02:06:03 toshiakikoike has joined #tokyows 02:06:58 murakami has joined #tokyows 02:07:06 huijing has joined #tokyows 02:07:13 ScribeNick: fantasai 02:07:23 Topic: Discussion 02:07:23 jkamata has joined #tokyows 02:08:02 ?: Wanted to as for feedback about our vocabulary for comics presentation. 02:08:10 s/as for/ask for/ 02:08:32 Murata-san: On Behalf of APL, want to make a comment. 02:08:59 Murata-san: We like the idea of making an open standard for describing this kind of art, but not ready to discuss details of such things. 02:09:07 Murata-san: Starting with taxonomy is a good idea. 02:09:19 ReinaldoFerraz has joined #tokyows 02:09:22 Murata-san: We're interested in maybe pursuing in a Community Group at W3C 02:09:29 naomi has joined #tokyows 02:10:06 Ivan: Community Group at W3C is simple thing, they create reports, not standards. They're an incubation space for developing together, provides just some basic infrastructure like wiki, mailing list. Takes about 1hr to create, and is free to participate. 02:10:18 laudrain has joined #tokyows 02:10:35 ?: We at EDRLab are committed to join a CG at W3C, seems like a good idea. 02:10:48 ?: We got a lot of feedback, and would be interesting to work on a complete CSS implementation 02:11:03 ?: Good place to make the taxonomy, use case list, etc. more visible and to make it more in the direction of the Web. 02:11:11 ?: We completely agree and we will do it! 02:11:36 s/?/Samuel Petit/ 02:11:50 ??: Discussed with Rachel that authors should be involved in such a work 02:11:56 ??: Working on a taxonomy is the best time to join. 02:12:13 s/??/Laurent/ 02:12:29 Laurent: So even if authors are afraid of technical environment of W3C, working on taxonomy can be more appoachable 02:12:48 Samuel: IDPF on ??, we co-organized with Hachette and Kodansha 02:12:54 Bobbytung has joined #tokyows 02:12:54 Samuel: We succeeded to have ? on stage 02:13:09 Bobbytung_ has joined #tokyows 02:13:26 Samuel: It is always difficult in technical points, but if the point is taxonomy and use cases, this is more understandable for authors and is a better starting point 02:13:49 Ivan: So let's agree that we will will work on this next week. Write a text on what you want to achieve, and we will distribute to workshop participants to start. 02:13:59 s/?:/Samuel Petit:/ 02:14:01 s/?:/Samuel Petit:/ 02:15:11 Florian: We could have a breakout session at TPAC, and can announce the session at TPAC. Hard ot do anything else. 02:15:27 r12a: As an outsider, it seems like you are all going in different directions 02:15:50 r12a: Seems like movement needs to harmonize the different actors and parts of the technology 02:16:19 r12a: Lots of different things happening, but all happening to solve a problem that's real 02:16:25 r12a: Might have better leverage if more coordinated 02:16:59 ???: Two tracks in the workshop it seems. One is digitizing comics. Other is evolution of ebook layout, mostly text-heavy work on screen. 02:17:06 ???: I think we would have to create two trends. 02:17:24 ???: We can't mix in the CG things about responsive layout and the fixed-layout comics 02:17:38 Ivan: CG would be a first forum for this discussion. 02:17:57 Ivan: It might turn out that there are two directions that represent distinct work, then there's room for another CG. 02:18:26 Ivan: Additionally, we ahve to be very careful that the work you do -- whethe rone or two CGs, doesn't matter -- make sure that it is synchronized with the relevant WGs 02:18:40 Ivan: Set up a regular exchange of information 02:19:09 Ivan: Once you have figured out where to apply the pressure, don't let up. 02:19:20 dauwhe: My concern about splitting is that this really is One Web. 02:20:00 dauwhe: There were lots of good presentations about different points on the spectrum between responsive presentations and fixed layout, don't want to artificially divide the community 02:20:04 Florian: ... 02:20:20 Florian: If our goal is to find one true format for books, then it's going to be a huge project. 02:20:28 Florian: But that is not my impression of what EDRLab is trying to do 02:20:43 Florian: More that they are trying to solve some specific subset of the problem. 02:20:54 Florian: If we try to solve everything, effort will fail. 02:21:18 Florian: But cost-effective production of commonly-found paradigms, then it's quite possible. 02:21:33 Florian: and we can put things out of scope and achieve something. 02:21:44 Laurent: I completely agree. We have to focus. 02:22:19 s/Laurent:/laudrain:/ 02:22:28 Laurent: Also wrt fixed layout for e.g. textbooks etc, we don't need a new Community Group, we need to join the CSS Working Group. The publishing industry needs to be there, to apply the pressure. 02:22:45 Ivan: How do we convince the publishing industry that this is what has to happen. 02:23:07 Ivan: If we just say something, say that "we should do this" and stop there, then nothing happens. 02:23:20 Ivan: We need to find the people who can get involved, and get them involved. 02:23:35 Ivan: And not done yet, need to find way to communicate with publishing industry in useful, proactive way. 02:23:51 Ivan: You who are in this industry, how can we convince people that this must be done? 02:24:01 Florian: Yes, we have to make it happen; yes we have to do work. 02:24:14 Florian: But also, want to point out that not everything happens in a conference room. 02:24:23 Florian: CSSWG operates in a hybrid manner. 02:24:43 Florian: Yes we have F2F meetings, and some work happens there. But other work happens in telecons. Other work happens in GitHub. 02:25:16 Florian: SOme groups focused on one work mode, csswg works in multiple. If you don't like meetings don't have to attend meetings. If you work best in meetings, come attend the meetings. 02:25:26 Ivan: Inviting to join the *virtual* table. 02:25:31 Nat: ... 02:25:49 Nat: I was inspired to see the creativity in the Web space, in the media space. It's exciting to see what's possible. 02:26:12 Nat: I think proofs of concept, small groups of people trying to achieve something, and then getting the word out will draw people to it. 02:26:26 Nat: Way to convince people, friends, publishing industry to join and participate. 02:26:48 Nat: That kind of draw, plus stick of if you don't adapt you die, is a good motivation. 02:27:15 Laurent: I'm afraid such sophisticated books are a very small portion of the industry. 02:27:29 s/Laurent/laudrain/ 02:27:33 Laurent: It's a very big use case for us to be able to have some transformation from the indesign page to something that is CSS implementation. 02:27:46 s/Laurent/laudrain/ 02:27:49 Nat: You come from an industry that is one of the most conservative that I have ever seen. very hard to convince anyone to move anywhere. 02:28:03 Nat: But competition is a way to encourage innovation. 02:28:08 Nat: ... 02:28:19 Nat: Define yourself as leaders, as thought leaders. 02:28:30 Laudrain: We are successful with paper books. 02:28:44 Florian: Aside from hachette, another company that has embraced the Web is O'Reilly. 02:28:58 myles__________ has joined #tokyows 02:29:31 Florian: Yes, their layouts are relatively simple. Easier to be pioneers in their approach. Using HTMl + CSS in production. 02:30:16 Ivan: There are different publishers which have different roles and approaches than books. 02:30:27 s/approaches/business models/ 02:30:39 Ivan: THe publishing industry is way more diverse than we laypeople realize 02:30:59 Zakim has left #tokyows 02:31:07 Florian: It has multiple business models, but some business models would only be possible in moving to the Web. 02:31:24 Laudrain: We will have this as the next item on the agenda of publishing business group 02:31:27 Zakim has joined #tokyows 02:31:51 Ivan: For those of you who represent bigger publishers, a way to join work at W3C without joining as a full member, can join the business group. 02:32:13 Ivan: I think there were some other ideas and problems that came up in these 1.5 days 02:32:24 Ivan: e.g. Bobby's issue about fonts and relationship with font community 02:32:32 Ivan: Worth discussing what and how to do there. 02:32:45 Florian: Nat's presentation showed fonts being more and more important 02:32:56 Florian: should relate better fonts community and w3c community 02:33:25 Murata-san: SC29 is committe responsible for maintaining OpenType specification 02:33:39 Murata-san: And second is JIS, I called today they are willing to have a relationship with W3C 02:33:53 fantasai: having some kind of community for fonts is important 02:34:06 fantasai: it comes on many topics, such as what bobby discussed 02:34:31 fantasai: it also comes up because we lack font metrics for many writing systems, and cannot do good layout without that 02:34:47 fantasai: so we need a relation / liaison with font people 02:35:09 fantasai: I was at the Typo conference, talking about this need 02:35:23 fantasai: and font people also didn't know how to report problems back to us 02:36:15 fantasai: I think this all together could be a community of people who work on fonts, and for people in the css and the web. 02:36:44 fantasai: we need to talk to people who make the open type specification, but also to font authors, so that we can have discussion about problematic fonts 02:37:13 ivan: so what should we do next? It sounds like we need to formal liaison, but also more. 02:37:41 fantasai: Maybe similarly to JL-TF, we may need a community of experts, so that we can talk to them 02:38:05 fantasai: I have never succeeded in finding where they are, what their home page is 02:38:13 ivan: Maybe talk to Vlad 02:38:21 fantasai: also Chris Lilley 02:38:33 natMccully: CC me 02:38:47 Florian: I'm happy to be in the loop too 02:39:04 myles__________: isn't there a web fonts working group? 02:39:25 ivan: Yes, Chris is that group's team contact, and Vlad is the co-chair 02:39:32 ivan: but the scope of that group is different 02:40:03 Bobbytung_: I think it is a good time to get people toghether 02:40:57 ScribeNick: fantasai 02:41:23 Florian: Short repeat of what said yesterday, but as talking about what to do next, want to remind people of r12a's invitation to join the JLTF and other Internationalization Activities 02:41:55 fantasai: And if you don't know how to get involved, talk to Richard Ishida 02:43:46 Bobbytung has joined #tokyows 02:43:53 s/talk to Richard Ishida/talk to Richard Ishida or Kida-san/ 02:43:57 laudrain has joined #tokyows 02:44:01 r12a: When I was learning about paged media was paged media for epub or paged media for PDF. 02:44:53 r12a: I ended up with the wrong at-rules. One for print, but then I had to write the same rules for epub as for PDF generation in a different part of the style sheet, and it seemed there should be a single paged media media query and maybe get rid of the print one 02:45:27 Florian: I have an entire presentation on that topic, but short version is that media types like print are not granular enough 02:46:11 Florian: We have moved from media types to media features, you can ask "is this interactive?" "can I click on small things?" "Can I change it after it's rendered? Does it have fast enough updates to animate?" 02:46:21 Florian: We have a fair range of things in the spec, but that's the general approach 02:46:39 Florian: If you notice features of the media environment that you need to query but can't, then let us know in the CSSWG. 02:46:50 https://www.w3.org/TR/mediaqueries-4/#mf-overflow-block 02:47:20 r12a has joined #tokyows 02:47:25 dauwhe: Wanted to go back to organizational questions from a moment ago. 02:47:42 dauwhe: Talked about having a group to discuss font issues and interface with CSSWG + Font vendors + OpenType 02:47:45 rodzvilla has joined #tokyows 02:47:53 dauwhe: Talked about group to discuss manga and comics and digitization 02:48:03 dauwhe: we came up with many suggestions in the workshop, how do we document them? 02:48:04 Murata has joined #tokyows 02:48:15 dauwhe: Many *LREQ groups, but who will be end-user of information they generate? 02:48:16 If you would like to know more, here is a video of a 20 minute presentation I made about the question richard asked about Media Queries: https://www.dotconferences.com/2017/11/florian-rivoal-media-queries-4 02:48:48 dauwhe: How do we organize and coordinate these groups, and make sure information flows form one to the other? 02:48:50 ISO/IEC JTC1/SC29 02:49:05 Ivan: Very good question, I don't have a direct answer. It's a problem at the W3C level 02:49:37 Ivan: All the groups directly on publications or in the CGs, have a one-stop place where there is a one-stop place with a good set of references. 02:49:41 q+ 02:49:55 Ivan: Requires a lot of work for people to gather these 02:50:24 fantasai: I think there are several approches to coordination 02:50:36 nmccully has joined #tokyows 02:50:38 fantasai: don't have groups that too small 02:51:17 Taro has joined #tokyows 02:51:27 fantasai: to have coordination between two groups, you need either someone who is in both groups, or 2 people in each group who frequently talk to eachother 02:52:13 fantasai: just joining the group and being passive isn't quite sufficient to establish a link, you need to be meaningfully involved in both 02:52:30 fantasai: example: Dave Cramer links CSS-WG and Publishing 02:52:53 fantasai: example2: Rachel Andrew links the CSS-WG and the broader web developer community 02:53:13 fantasai: example3: I was the liaison between CSS and EPUB 02:53:34 fantasai: so formal liaison is the solution, but for them to work active involvment is required 02:54:16 racheln: ????? 02:54:23 s/too small/too small, there won't be enough people to link the communities, and not enough overlap among the topics to create integration/ 02:54:50 ivan: there are many people who are active in Publishing CG / WG / BG, but we need to be systematic when following that pattern 02:55:27 laurent: For coordination at the top, we need a new publishing champion 02:55:49 laurent: for the rest, we need blogs, hash tags 02:56:37 Bobbytung: different topic: based on the presentations yesterday, should we work on the description language for manga 02:56:50 murata: APL isn't interested 02:57:10 laurent: XML is not very popular at the moment 02:57:31 laurent: so I think it would have to be out of W3C 02:58:17 ivan: I don't think that's true. If there is a community, we can have a group. XML is gone on the front end, but there's nothing stopping it in the backend, interchange, etc 02:58:41 ivan: it is true that front-end web development has moved away from XML, but let's not overgeneralize 02:58:52 dauwhe: back on coordination 02:59:13 dauwhe: I would like to have a some a repository where we can post issues to triage things 02:59:20 fantasai: who is "we"? 02:59:59 fantasai: there are plenty of repos to track issues on many topics. What is the new repo for? 03:00:54 dauwhe: sometimes it's not clear where some issues fit, so a place to do triage 03:00:58 Bobbytung_ has joined #tokyows 03:01:20 fantasai: but what's the scope? this work shop? all workshops? anything publishing ? any topic? 03:02:29 ivan: the publishing business group is sort of meant to serve that role, maybe it could have a repo 03:02:33 dauwhe: maybe 03:02:47 ivan: luc, please talk to the co-chair of the business group 03:05:59 myles__________ has joined #tokyows 03:07:45 ivan: [explains what happens next] report will be posted in 2 or 3 weeks, minutes will be cleaned up, community group will be created, and everybody who was registered will be notified by email 03:07:56 ivan has joined #tokyows 03:08:06 rrsagent, draft minutes 03:08:06 I have made the request to generate https://www.w3.org/2018/09/17-tokyows-minutes.html ivan 03:23:29 rrsagent, bye 03:23:29 I see no action items