* Exporting highlights
@ 2015-03-15 23:01 Idris Samawi Hamid ادريس سماوي حامد
2015-03-16 4:49 ` Aditya Mahajan
2015-03-16 14:34 ` Idris Samawi Hamid ادريس سماوي حامد
0 siblings, 2 replies; 3+ messages in thread
From: Idris Samawi Hamid ادريس سماوي حامد @ 2015-03-15 23:01 UTC (permalink / raw)
To: ntg-context
[-- Attachment #1: Type: text/plain, Size: 3569 bytes --]
Dear gang,
Ok, I'm rolling up my sleeves and taking another stab at exporting to
xhtml (maybe even epub). Major project, so taking this one small step at a
time.
The immediate aim is to get correct output in a browser (I use Opera, and
Chrome as a control). Test files attached.
Immediate problem is highlights.
============export-highlight.tex==============
\setupbackend
[export=yes,css=highlight.css]
\definehighlight[emphasis] [style=italic]
\definehighlight[important][style=bold]
\definehighlight[regular][style=\tf]
\starttext
\startchapter[title=Highlights]
\startparagraph
This is \emphasis{emphasis}. This is \important{important}. This is
\regular{regular}.
This is \emphasis{some emphasized text, with \regular{regular} in between}.
This is \important{some important text, with \regular{regular} in between}.
\stopparagraph
\stopchapter
\stoptext
===============================================
In highlight.css (copied from export-sample.css and modified) I added
these lines:
==================
highlight [detail="emphasis"]{
font-weight : italic ;
}
highlight [detail="important"]{
font-weight : bold ;
}
highlight [detail="regular"]{
font-weight : regular ;
}
==================
Results:
=======export-highlight-tag.xhtml========
<sectioncontent>
<paragraph>This is <highlight detail="emphasis">emphasis</highlight>.
This is <highlight detail="important">important</highlight>. This is
<highlight detail="regular">regular</highlight>. <break/>
This is <highlight detail="emphasis">some emphasized text, with <highlight
detail="regular">regular</highlight> in between</highlight>. <break/>
This is <highlight detail="important">some important text, with <highlight
detail="regular">regular</highlight> in between</highlight>.</paragraph>
</sectioncontent>
=======export-highlight-div.xhtml========
<div class="paragraph">This is <div class="highlight
emphasis">emphasis</div>. This is <div class="highlight
important">important</div>. This is <div class="highlight
regular">regular</div>. <div class="break"><!--empty--></div>
This is <div class="highlight emphasis">some emphasized text, with <div
class="highlight regular">regular</div> in between</div>. <div
class="break"><!--empty--></div>
This is <div class="highlight important">some important text, with <div
class="highlight regular">regular</div> in between</div>.</div>
=========================================
Observation: Opera won't render *-raw.xml, so we ignore that file.
In a browser we have
Challenge 1:
Neither export-highlight-tag.xhtml nor export-highlight-div.xhtml renders
the highlights. What do we need to do?
Challenge 2:
export-highlight-div.xhtml breaks the line before a highlight as well as
after a highlight. What is missing here?
Aim: To turn my current project into an epub, or at least something that
can be viewed in a browser (xhtml).
Caveat: I don't know much web development (css, xhtml, div, etc) but am
willing to work with what I have... but only IF there is a finish line. If
there is no finish line (i.e., things are too broken at the moment to get
the mission accomplished via what ConTeXt and CSS provide) kindly let me
know so I can stop now!
Henning Hraban Ramm and Aditya Mahajan mentioned XSLT stylesheets, but
this is probably way above my paygrade, unless someone can give me very
simple newbie pointers.
Thanks to all in advance and
Best wishes
Idris
--
Idris Samawi Hamid
Professor of Philosophy
Colorado State University
Fort Collins, CO 80523
[-- Attachment #2: export-highlight.tex --]
[-- Type: application/x-tex, Size: 510 bytes --]
[-- Attachment #3: export-highlight.pdf --]
[-- Type: application/pdf, Size: 15293 bytes --]
[-- Attachment #4: highlight.css --]
[-- Type: text/css, Size: 13020 bytes --]
/*
author : Hans Hagen, PRAGMA-ADE, Hasselt NL
copyright : PRAGMA ADE / ConTeXt Development Team
license : see context related readme files
comment : companion to context.mkiv
*/
/* ignore : mixed */
/* metadata: display */
ignore {
display : none ;
}
xmetadata {
display : none ;
}
xmetavariable {
display : none ;
}
/* document : display */
document:before {
content : attr(title) ;
font-size : 44pt ;
font-weight : bold ;
margin-bottom : 1em ;
}
document {
font-family : "DejaVu Serif", "Lucida Bright", serif ;
font-size : 12pt ;
max-width : 50em ;
padding : 1em ;
/* text-align : justify ; */
/* hyphens : manual ; */
/* text-justify : inter-word ; */
}
document>metadata {
font-family : "Lucida Console", "DejaVu Sans Mono", monospace ;
margin-bottom : 2em ;
}
document>metadata>metavariable[name="title"]:before {
content : "title\00A0\00A0\00A0:\00A0" ;
}
document>metadata>metavariable[name="author"]:before {
content : "author\00A0\00A0:\00A0" ;
}
document>metadata>metavariable[name="version"]:before {
content : "version\00A0:\00A0" ;
}
document>metadata>metavariable[name="title"], document>metadata>metavariable[name="author"], document>metadata>metavariable[name="version"] {
display : block ;
}
/* paragraph : mixed */
/* p : mixed */
paragraph, p {
display : block ;
margin-top : 0.5em ;
margin-bottom : 0.5em ;
}
/* break : display */
break {
display : block ;
margin-bottom : 0.5em ;
}
/* construct : inline */
/* highlight : inline */
construct {
}
construct[detail="important"] {
font-weight : bold ;
}
highlight [detail="emphasis"]{
font-weight : italic ;
}
highlight [detail="important"]{
font-weight : bold ;
}
highlight [detail="regular"]{
font-weight : regular ;
}
/* section : display */
/* sectiontitle : mixed */
/* sectionnumber : mixed */
/* sectioncontent : display */
section {
display : block ;
}
sectioncontent {
display : block ;
margin-top : 1em ;
margin-bottom : 1em ;
}
section[detail="chapter"], section[detail="title"] {
margin-top : 3em ;
margin-bottom : 2em ;
}
section[detail="section"], section[detail="subject"] {
margin-top : 2.5em ;
margin-bottom : 2.5em ;
}
section[detail="subsection"], section[detail="subsubject"] {
margin-top : 2em ;
margin-bottom : 2em ;
}
section[detail="subsubsection"], section[detail="subsubsubject"] {
margin-top : 1em ;
margin-bottom : 0em ;
}
section[detail="summary"], section[detail="subsummary"] {
margin-top : 1em ;
margin-bottom : 1em ;
}
section[detail="chapter"]>sectionnumber {
display : inline-block ;
margin-right : 1em ;
font-size : 3em ;
font-weight : bold ;
}
section[detail="chapter"]>sectiontitle, section[detail="title"]>sectiontitle {
font-size : 3em ;
font-weight : bold ;
}
section[detail="section"]>sectiontitle, section[detail="subject"]>sectiontitle {
font-size : 2.5em ;
font-weight : bold ;
}
section[detail="subsection"]>sectiontitle, section[detail="subsubject"]>sectiontitle{
font-size : 2em ;
font-weight : bold ;
}
section[detail="subsubsection"]>sectiontitle, section[detail="subsubsubject"]>sectiontitle{
font-size : 1em ;
font-weight : bold ;
}
section[detail="section"]>sectionnumber {
display : inline-block ;
margin-right : 1em ;
font-size : 2.5em ;
font-weight : bold ;
}
section[detail="summary"]>sectiontitle {
display : block ;
margin-top : 1em ;
margin-bottom : 1em ;
font-weight : bold ;
border-bottom-style : solid ;
border-color : rgb(50%,50%,100%) ;
border-width : .15em;
}
section[detail="subsection"]>sectionnumber {
display : inline-block ;
margin-right : 1em ;
font-size : 2em ;
font-weight : bold ;
}
section[detail="subsection"]>sectionnumber {
display : inline-block ;
margin-right : 1em ;
font-size : 1em ;
font-weight : bold ;
}
section[detail="subsummary"]>sectiontitle {
display : block ;
margin-top : 1em ;
margin-bottom : 1em ;
font-weight : bold ;
border-color : rgb(50%,50%,100%) ;
border-bottom-style : dotted ;
border-width : .15em ;
}
/* itemgroup : display */
/* item : display */
/* itemtag : mixed */
/* itemcontent : mixed */
itemgroup {
display : block ;
margin-bottom : 0.5em ;
margin-top : 0.5em ;
}
itemgroup[symbol="1"] { list-style-type : disc ; }
itemgroup[symbol="2"] { list-style-type : square ; }
itemgroup[symbol="3"] { list-style-type : square ; }
itemgroup[symbol="4"] { list-style-type : square ; }
itemgroup[symbol="5"] { list-style-type : circ ; }
itemgroup[symbol="a"] { list-style-type : lower-alpha ; }
itemgroup[symbol="A"] { list-style-type : alpha ; }
itemgroup[symbol="r"] { list-style-type : lower-roman ; }
itemgroup[symbol="R"] { list-style-type : upper-roman ; }
itemgroup[symbol="n"] { list-style-type : decimal ; }
itemgroup[symbol="g"] { list-style-type : lower-greek ; }
itemgroup[symbol="G"] { list-style-type : upper-greek ; }
item {
display : list-item ;
margin-left : 1em ;
margin-bottom : 0.5em ;
margin-top : 0.5em ;
}
itemtag {
display: none ;
}
itemcontent {
}
/* description : display */
/* descriptiontag : mixed */
/* descriptioncontent : mixed */
/* descriptionsymbol : inline */
description {
display : block ;
margin-bottom : 1em ;
margin-top : 1em ;
}
descriptiontag {
float : left ;
clear : left ;
margin-right : 1em ;
text-align : left ;
font-weight : bold ;
}
descriptioncontent {
}
descriptionsymbol {
}
/* verbatimblock : display */
/* verbatimlines : display */
/* verbatimline : mixed */
/* verbatim : inline */
verbatimblock {
background-color : rgb(50%,50%,100%) ;
display : block ;
padding : 1em ;
margin-bottom : 1em ;
margin-top : 1em ;
font-family : "Lucida Console", "DejaVu Sans Mono", monospace ;
}
verbatimlines+verbatimlines {
display : block ;
margin-top : 1em ;
}
verbatimline {
display : block ;
white-space : pre-wrap ;
}
verbatim {
white-space : pre-wrap ;
color : rgb(60%,60%,0%) ;
font-family : "Lucida Console", "DejaVu Sans Mono", monospace ;
}
/* lines : display */
/* line : mixed */
lines {
display : block ;
margin-bottom : 1em ;
margin-top : 1em ;
}
lines+lines {
display : block ;
margin-top : 1em ;
}
line {
display : block ;
white-space : pre-wrap ;
}
/* synonym : inline */
/* sorting : inline */
sorting, synonym {
display : inline ;
font-variant : small-caps ;
}
/* register : display */
/* registersection : display */
/* registertag : mixed */
/* registerentries : display */
/* registerentry : mixed */
/* registersee : mixed */
/* registerpages : mixed */
/* registerpage : inline */
/* registerpagerange : mixed */
register {
display: none ;
}
/* table : display */
/* tablerow : display */
/* tablecell : mixed */
table {
display : table ;
}
tablerow {
display : table-row ;
}
tablecell[align="middle"] {
display : table-cell ;
text-align : center ;
padding : .1em ;
}
tablecell[align="flushleft"] {
display : table-cell ;
text-align : left ;
padding : .1em ;
}
tablecell[align="flushright"] {
display : table-cell ;
text-align : right ;
padding : .1em ;
}
tablecell {
display : table-cell ;
text-align : left ;
padding : .1em ;
}
/* tabulate : display */
/* tabulaterow : display */
/* tabulatecell : mixed */
tabulate {
display : table ;
margin-top : 1em ;
margin-bottom : 1em ;
margin-left : 2.5em ;
}
tabulaterow {
display : table-row ;
}
tabulatecell[align="middle"] {
display : table-cell ;
text-align : center ;
padding-right : 1em ;
}
tabulatecell[align="flushleft"] {
display : table-cell ;
text-align : left ;
padding-right : 1em ;
}
tabulatecell[align="flushright"] {
display : table-cell ;
text-align : right ;
padding-right : 1em ;
}
tabulatecell {
display : table-cell ;
text-align : left ;
padding-right : 1em ;
}
/* combination : display */
/* combinationpair : display */
/* combinationcontent : mixed */
/* combinationcaption : mixed */
combination {
display : table ;
margin-top : 0em ;
margin-bottom : 0em ;
}
combinationpair {
display : table-cell ;
padding-right : 1em ;
}
combinationcontent {
display : table-row ;
text-align : center ;
}
combinationcaption {
display : table-row ;
padding-top : 1ex ;
text-align : center ;
}
/* list : display */
/* listitem : display */
/* listtag : mixed */
/* listcontent : mixed */
/* listdata : mixed */
/* listpage : mixed */
list {
display : block ;
}
listitem[detail="chapter"] {
display : block ;
margin-top : 1em ;
font-weight : bold ;
}
listitem[detail="section"] {
display : block ;
}
listitem[detail="subsection"] {
display : block ;
}
listtag {
display : inline-block ;
width : 5em ;
}
listcontent {
}
listdata {
}
listpage {
display : none ;
}
/* delimitedblock : display */
/* delimited : inline */
/* subsentence : inline */
/* :lang(en) */
delimited[detail="quotation"]:before, delimitedblock[detail="quotation"]:before {
content : "\201C" ;
}
delimited[detail="quotation"]:after, delimitedblock[detail="quotation"]:after {
content : "\201D" ;
}
delimited[detail="quote"]:before, delimitedblock[detail="quote"]:before {
content : "\2018" ;
}
delimited[detail="quote"]:after, delimitedblock[detail="quote"]:after {
content : "\2019" ;
}
delimited {
display : inline
}
delimitedblock {
display : block
}
subsentence:before, subsentence:after {
content : "\2014" ;
}
subsentence {
display : inline
}
/* label : mixed */
/* number : mixed */
/* float : display */
/* floatcaption : mixed */
/* floatlabel : inline */
/* floatnumber : inline */
/* floattext : mixed */
/* floatcontent : mixed */
float {
display : block ;
margin-top : 1em ;
margin-bottom : 1em ;
margin-left : 2.5em ;
}
floatcaption {
display : block ;
margin-top : 0.5em ;
color : rgb(60%,60%,0%) ;
}
floatlabel {
font-weight : bold ;
margin-right : 1em ;
}
floatnumber {
font-weight : bold ;
}
floattext {
}
floatcontent {
}
/* image : mixed */
/* mpgraphic : mixed */
/* image {
display : block ;
background : url(hacker.jpg) ;
background-size : 100% auto ;
width : 8.992cm ;
height : 5.994cm ;
} */
mpgraphic:before { /* does not work with empty element */
content : "[runtime metapost graphic]" ;
}
mpgraphic {
display : inline ;
}
/* formula : display */
/* subformula : display */
/* formulaset : display */
/* formulacaption : mixed */
/* formulalabel : mixed */
/* formulanumber : mixed */
/* formulacontent : display */
formula {
display : block ;
margin-top : 1em ;
margin-bottom : 1em ;
margin-left : 2.5em ;
}
subformula { /* todo */
display : block ;
margin-top : 1em ;
margin-bottom : 1em ;
margin-left : 2.5em ;
}
formulaset { /* todo */
display : block ;
margin-top : 1em ;
margin-bottom : 1em ;
margin-left : 2.5em ;
}
formulacaption { /* todo */
display : block ;
margin-top : 0.5em ;
color : rgb(60%,60%,0%) ;
}
formulalabel {
font-weight : bold ;
margin-right : 1em ;
}
formulanumber {
font-weight : bold ;
}
formulacontent {
display : block ;
}
/* link : inline */
/* margintextblock : inline */
/* margintext : inline */
/* math : inline */
/* mn : mixed */
/* mi : mixed */
/* mo : mixed */
/* ms : mixed */
/* mrow : display */
/* msubsup : display */
/* msub : display */
/* msup : display */
/* merror : mixed */
/* munderover : display */
/* munder : display */
/* mover : display */
/* mtext : mixed */
/* mfrac : display */
/* mroot : display */
/* msqrt : display */
/* mfenced : display */
/* maction : display */
/* mtable : display */
/* mtr : display */
/* mtd : display */
/* quantity : inline */
/* unit : inline */
/* number : inline */
quantity {
}
quantity>unit {
}
quantity>number {
}
/* sub : inline */
/* sup : inline */
/* subsup : inline */
sup {
font-size : xx-small ;
line-height : 0 ;
vertical-align : top ;
}
sub {
font-size : xx-small ;
line-height : 0 ;
vertical-align : bottom ;
}
subsup>sup {
vertical-align : top ;
}
subsup>sub {
vertical-align : bottom ;
}
/* xhtml */
a[href] {
text-decoration : none ;
color : inherit ;
}
a[href]:hover {
color : rgb(50%,0%,0%) ;
text-decoration : underline ;
}
[-- Attachment #5: export-highlight-tag.xhtml --]
[-- Type: application/xhtml+xml, Size: 1333 bytes --]
[-- Attachment #6: export-highlight-div.xhtml --]
[-- Type: application/xhtml+xml, Size: 1521 bytes --]
[-- Attachment #7: Type: text/plain, Size: 485 bytes --]
___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!
maillist : ntg-context@ntg.nl / http://www.ntg.nl/mailman/listinfo/ntg-context
webpage : http://www.pragma-ade.nl / http://tex.aanhet.net
archive : http://foundry.supelec.fr/projects/contextrev/
wiki : http://contextgarden.net
___________________________________________________________________________________
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: Exporting highlights
2015-03-15 23:01 Exporting highlights Idris Samawi Hamid ادريس سماوي حامد
@ 2015-03-16 4:49 ` Aditya Mahajan
2015-03-16 14:34 ` Idris Samawi Hamid ادريس سماوي حامد
1 sibling, 0 replies; 3+ messages in thread
From: Aditya Mahajan @ 2015-03-16 4:49 UTC (permalink / raw)
To: Idris Samawi Hamid ادريس
سماوي حامد
Cc: mailing list for ConTeXt users
[-- Attachment #1: Type: TEXT/PLAIN, Size: 1411 bytes --]
On Sun, 15 Mar 2015, Idris Samawi Hamid ادريس سماوي حامد wrote:
> [Dear Aditya, I sent this to the list; sending it to you to have a look as
> well. Any assistance is much appreciated, especially if I have to go the xslt
> route! Thanks in advance!!]
It has been almost 1.5 years since I had a serious look at XML generated
by ConTeXt. At that time, ConTeXt did not generate XHTML, so I thought
that one has to go through the XLST route. But, it looks that things have
changed.
> =======export-highlight-div.xhtml========
> <div class="paragraph">This is <div class="highlight
> emphasis">emphasis</div>. This is <div class="highlight
> important">important</div>. This is <div class="highlight
> regular">regular</div>. <div class="break"><!--empty--></div>
> This is <div class="highlight emphasis">some emphasized text, with <div
> class="highlight regular">regular</div> in between</div>. <div
> class="break"><!--empty--></div>
> This is <div class="highlight important">some important text, with <div
> class="highlight regular">regular</div> in between</div>.</div>
> =========================================
This is very well formed XHTML. You just need a proper CSS stylesheet to
do the correct rednering. Something like:
.highlight.important {
font-weight: bold;
}
.highlight.emphasis {
font-style: italic;
}
etc.
Aditya
[-- Attachment #2: Type: text/plain, Size: 485 bytes --]
___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!
maillist : ntg-context@ntg.nl / http://www.ntg.nl/mailman/listinfo/ntg-context
webpage : http://www.pragma-ade.nl / http://tex.aanhet.net
archive : http://foundry.supelec.fr/projects/contextrev/
wiki : http://contextgarden.net
___________________________________________________________________________________
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: Exporting highlights
2015-03-15 23:01 Exporting highlights Idris Samawi Hamid ادريس سماوي حامد
2015-03-16 4:49 ` Aditya Mahajan
@ 2015-03-16 14:34 ` Idris Samawi Hamid ادريس سماوي حامد
1 sibling, 0 replies; 3+ messages in thread
From: Idris Samawi Hamid ادريس سماوي حامد @ 2015-03-16 14:34 UTC (permalink / raw)
To: mailing list for ConTeXt users
Ok, I've made some progress:
On Sun, 15 Mar 2015 17:01:16 -0600, Idris Samawi Hamid ادريس سماوي حامد
<ishamid@colostate.edu> wrote:
> ============export-highlight.tex==============
> \setupbackend
> [export=yes,css=highlight.css]
\setupexport[cssfile=highlight.css]
\setupbackend[export=yes]
> \definehighlight[emphasis] [style=italic]
> \definehighlight[important][style=bold]
> \definehighlight[regular][style=\tf]
>
> \starttext
>
> \startchapter[title=Highlights]
> \startparagraph
> This is \emphasis{emphasis}. This is \important{important}. This is
> \regular{regular}.
>
> This is \emphasis{some emphasized text, with \regular{regular} in
> between}.
>
> This is \important{some important text, with \regular{regular} in
> between}.
> \stopparagraph
> \stopchapter
> \stoptext
> ===============================================
>
> In highlight.css (copied from export-sample.css and modified) I added
> these lines:
>
> ==================
> highlight [detail="emphasis"]{
> font-weight : italic ;
> }
>
> highlight [detail="important"]{
> font-weight : bold ;
> }
>
> highlight [detail="regular"]{
> font-weight : regular ;
> }
> ==================
Syntax correction (thanks Aditya!):
.highlight.emphasis {
font-style: italic;
}
etc.
> Challenge 1:
> Neither export-highlight-tag.xhtml nor export-highlight-div.xhtml renders
> the highlights. What do we need to do?
For italic, see above. For bold, we need
font-weight: bold;
> Challenge 2:
> export-highlight-div.xhtml breaks the line before a highlight as well as
> after a highlight. What is missing here?
display: inline;
So here is exactly what we need:
.highlight.important {
font-weight: bold;
font-style: normal;
display: inline;
}
.highlight.emphasis {
font-weight: normal;
font-style: italic;
display: inline;
}
.highlight.regular {
font-weight: normal;
font-style: normal;
display: inline;
}
Now export-highlight-div.xhtml renders in the browser exactly as in
export-highlight.pdf.
This is progress: a first step!
Best wishes
Idris
--
Idris Samawi Hamid
Professor of Philosophy
Colorado State University
Fort Collins, CO 80523
___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!
maillist : ntg-context@ntg.nl / http://www.ntg.nl/mailman/listinfo/ntg-context
webpage : http://www.pragma-ade.nl / http://tex.aanhet.net
archive : http://foundry.supelec.fr/projects/contextrev/
wiki : http://contextgarden.net
___________________________________________________________________________________
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2015-03-16 14:34 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2015-03-15 23:01 Exporting highlights Idris Samawi Hamid ادريس سماوي حامد
2015-03-16 4:49 ` Aditya Mahajan
2015-03-16 14:34 ` Idris Samawi Hamid ادريس سماوي حامد
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).