emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
* [html-export question] location with JS.
@ 2014-12-16 17:37 Rasmus
  2014-12-17  9:27 ` Christian Moe
  2014-12-17 10:29 ` Paul Rudin
  0 siblings, 2 replies; 7+ messages in thread
From: Rasmus @ 2014-12-16 17:37 UTC (permalink / raw)
  To: emacs-orgmode

[-- Attachment #1: Type: text/plain, Size: 668 bytes --]

Hi,

For my CV I'm trying to place a box (div, whatever) at the left edge of
the content-div.  My org-file looks like

- year0–year1 :: FooCorp
  - note1
  - note2 {{{BOL(year½)}}}

And I want the ouput to look like:

year0–year1    FooCorp
                - note1
year½           - note2

In the attached example I have the desired output for LaTeX, and the
output for html is also fine *as long as you don't zoom*.  The issue is
that the javascript that I use absolute position in pixels, and the
browser doesn't update the location when zooming...

Any ideas on how to solve this?

Thanks,
Rasmus

-- 
Together we will make the possible totalllly impossible!

[-- Attachment #2: test.org --]
[-- Type: application/vnd.lotus-organizer, Size: 3095 bytes --]

^ permalink raw reply	[flat|nested] 7+ messages in thread

* Re: [html-export question] location with JS.
  2014-12-16 17:37 [html-export question] location with JS Rasmus
@ 2014-12-17  9:27 ` Christian Moe
  2014-12-17 11:19   ` Rasmus
  2014-12-17 10:29 ` Paul Rudin
  1 sibling, 1 reply; 7+ messages in thread
From: Christian Moe @ 2014-12-17  9:27 UTC (permalink / raw)
  To: Rasmus; +Cc: emacs-orgmode


> The issue is
> that the javascript that I use absolute position in pixels, and the
> browser doesn't update the location when zooming...
>
> Any ideas on how to solve this?

Which browser? It seems to work well with zooming in Firefox and Safari,
so I'd say you're doing something right and the browser's doing
something wrong. (As you can guess from my attitude, though, I'm not a
professional web developer.)

Yours,
Christian

^ permalink raw reply	[flat|nested] 7+ messages in thread

* Re: [html-export question] location with JS.
  2014-12-16 17:37 [html-export question] location with JS Rasmus
  2014-12-17  9:27 ` Christian Moe
@ 2014-12-17 10:29 ` Paul Rudin
  2014-12-17 11:38   ` Rasmus
  1 sibling, 1 reply; 7+ messages in thread
From: Paul Rudin @ 2014-12-17 10:29 UTC (permalink / raw)
  To: emacs-orgmode-mXXj517/zsQ

Rasmus <rasmus-0UDz38MK/Mo@public.gmane.org> writes:

> Hi,
>
> For my CV I'm trying to place a box (div, whatever) at the left edge of
> the content-div.  My org-file looks like
>
> - year0–year1 :: FooCorp
>   - note1
>   - note2 {{{BOL(year½)}}}
>
> And I want the ouput to look like:
>
> year0–year1    FooCorp
>                 - note1
> year½           - note2
>
> In the attached example I have the desired output for LaTeX, and the
> output for html is also fine *as long as you don't zoom*.  The issue is
> that the javascript that I use absolute position in pixels, and the
> browser doesn't update the location when zooming...
>
> Any ideas on how to solve this?

Hoping for pixel perfect rendering for html is fraught with difficulty -
it's not really designed for that sort of thing. If that's what you want
then you may be better off producing a pdf.

^ permalink raw reply	[flat|nested] 7+ messages in thread

* Re: [html-export question] location with JS.
  2014-12-17  9:27 ` Christian Moe
@ 2014-12-17 11:19   ` Rasmus
  2014-12-17 13:11     ` Christian Moe
  0 siblings, 1 reply; 7+ messages in thread
From: Rasmus @ 2014-12-17 11:19 UTC (permalink / raw)
  To: mail; +Cc: emacs-orgmode

[-- Attachment #1: Type: text/plain, Size: 940 bytes --]

Hi Christian,

Christian Moe <mail@christianmoe.com> writes:

>> The issue is
>> that the javascript that I use absolute position in pixels, and the
>> browser doesn't update the location when zooming...
>>
>> Any ideas on how to solve this?
>
> Which browser? It seems to work well with zooming in Firefox and Safari,
> so I'd say you're doing something right and the browser's doing
> something wrong.

For a moment I hoped it was just a bug in the larger stylesheet(!).
Unfortunately, I think the nice behavior you saw was 'cause my example was
too minimal...  Try the attached file which has a title.  I definitely see
it here, zooming in and out, especially when the window ain't to large...

BTW: I tested using Firefox and Gnome Web.

> (As you can guess from my attitude, though, I'm not a professional web
> developer.)

As you can /see/, me neither...

Thanks,
Rasmus

-- 
Together we will make the possible totalllly impossible!

[-- Attachment #2: test.org --]
[-- Type: application/vnd.lotus-organizer, Size: 3381 bytes --]

^ permalink raw reply	[flat|nested] 7+ messages in thread

* Re: [html-export question] location with JS.
  2014-12-17 10:29 ` Paul Rudin
@ 2014-12-17 11:38   ` Rasmus
  0 siblings, 0 replies; 7+ messages in thread
From: Rasmus @ 2014-12-17 11:38 UTC (permalink / raw)
  To: emacs-orgmode

Paul Rudin <paul@rudin.co.uk> writes:

> Hoping for pixel perfect rendering for html is fraught with difficulty -
> it's not really designed for that sort of thing.

I'm only asking for two things (divs/spans) to be (almost) on the same
line (if you rerun the new example I sent to Christian you might see it
can go quite bad or see this¹ screen-shot)...

I tried to put the script in window.onresize but somehow it's not always
working...

> If that's what you want then you may be better off producing a pdf.

I prefer both.  Html is very comfortable on the screen and it's remarkably
capable for printing these days as well via CSS.  E.g. I found this,

    @media print {div[class^="outline-"], div[class*=" outline-"]
                  {page-break-inside: avoid;}}

Which makes page-breaks on print sensible.

I'm still having issues with small-caps, and a \vfill replacement for
print.  And the above.  Other than that I'm quite pleased with html.

—Rasmus

Footnotes: 
¹   Here's what it looks like zooming in and out:
    http://i.imgur.com/RLHI47C.png

-- 
Bang bang

^ permalink raw reply	[flat|nested] 7+ messages in thread

* Re: [html-export question] location with JS.
  2014-12-17 11:19   ` Rasmus
@ 2014-12-17 13:11     ` Christian Moe
  2014-12-17 15:01       ` Rasmus
  0 siblings, 1 reply; 7+ messages in thread
From: Christian Moe @ 2014-12-17 13:11 UTC (permalink / raw)
  To: Rasmus; +Cc: emacs-orgmode


It still works fine for me in Firefox with the added title and text,
zooming in and out (except when the window becomes seriously too small,
and the year jumps up on top of the other one, but that, I think, has to
be expected).

A different problem is that the script only picks out every other
bol-year DIV, as you will soon see if you add more entries with boxes on
the left. The reason is that getElementsByClassName returns a live
HTMLCollection that updates according to the document order of the
elements even as the script changes that order. To loop through them,
try simply

var e = elements[0]; // instead of var e = elements[i];

Yours,
Christian

Rasmus writes:

> Hi Christian,
>
> Christian Moe <mail@christianmoe.com> writes:
>
>>> The issue is
>>> that the javascript that I use absolute position in pixels, and the
>>> browser doesn't update the location when zooming...
>>>
>>> Any ideas on how to solve this?
>>
>> Which browser? It seems to work well with zooming in Firefox and Safari,
>> so I'd say you're doing something right and the browser's doing
>> something wrong.
>
> For a moment I hoped it was just a bug in the larger stylesheet(!).
> Unfortunately, I think the nice behavior you saw was 'cause my example was
> too minimal...  Try the attached file which has a title.  I definitely see
> it here, zooming in and out, especially when the window ain't to large...
>
> BTW: I tested using Firefox and Gnome Web.
>
>> (As you can guess from my attitude, though, I'm not a professional web
>> developer.)
>
> As you can /see/, me neither...
>
> Thanks,
> Rasmus

^ permalink raw reply	[flat|nested] 7+ messages in thread

* Re: [html-export question] location with JS.
  2014-12-17 13:11     ` Christian Moe
@ 2014-12-17 15:01       ` Rasmus
  0 siblings, 0 replies; 7+ messages in thread
From: Rasmus @ 2014-12-17 15:01 UTC (permalink / raw)
  To: mail; +Cc: emacs-orgmode

[-- Attachment #1: Type: text/plain, Size: 1268 bytes --]

Hi Christian,

Thanks for the insightful comments.  Javascript is an interesting domain;
totally foreign to me, though.

Christian Moe <mail@christianmoe.com> writes:

> (except when the window becomes seriously too small,
> and the year jumps up on top of the other one, but that, I think, has to
> be expected).

This is what I'm trying to get rid of, somehow...  In my full document it
seemed to jump around much more. . .

I think I got it working now by rerunning the script on resize and cloning
the node rather than modifying the original node.  I have no idea if this
is bad.  It works wonderfully in the newest Firefox and Gnome Web.

> A different problem is that the script only picks out every other
> bol-year DIV, as you will soon see if you add more entries with boxes on
> the left. The reason is that getElementsByClassName returns a live
> HTMLCollection that updates according to the document order of the
> elements even as the script changes that order.

Interesting.

> To loop through them, try simply
>
> var e = elements[0]; // instead of var e = elements[i];

Thanks this is very helpful.

Next step: Proper small caps and make it work well on my phone!

Thanks,
Rasmus

-- 
And I faced endless streams of vendor-approved Ikea furniture. . .

[-- Attachment #2: test.org --]
[-- Type: application/vnd.lotus-organizer, Size: 4047 bytes --]

^ permalink raw reply	[flat|nested] 7+ messages in thread

end of thread, other threads:[~2014-12-17 15:02 UTC | newest]

Thread overview: 7+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2014-12-16 17:37 [html-export question] location with JS Rasmus
2014-12-17  9:27 ` Christian Moe
2014-12-17 11:19   ` Rasmus
2014-12-17 13:11     ` Christian Moe
2014-12-17 15:01       ` Rasmus
2014-12-17 10:29 ` Paul Rudin
2014-12-17 11:38   ` Rasmus

Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

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 read-only IMAP folder(s) and NNTP newsgroup(s).