February 15, 2012
On Wednesday, 15 February 2012 at 02:11:45 UTC, Nick Sabalausky wrote:
> One issue I noticed though is that newlines don't seem to work:
>
> http://www.semitwist.com/download/img/shots/dforum.png

I've added a fallback CSS property for browsers that don't support CSS 3. Does it look better now?
February 15, 2012
On Tuesday, 14 February 2012 at 22:00:06 UTC, Walter Bright wrote:
> http://forum.dlang.org/
>
> This should replace the old miserable web interface to the forums.
>
> Thanks to Vladimir Panteleev for an awesome job writing this!

This is great. I stopped using the old web interface years ago and was reading from gmane, although you can't post from there. I'm really happy to be able to use this now.

February 15, 2012
Using @media and different CSS settings for different screens was a smart move, but you are not using it correctly. By setting the font-size in pixels, you completely forgot about the screen density, and the forum might end up with really small text for mobile or desktop. Obviously, you can set the minimum font size in your browser, but that's not a solution, since that size is usually used for notes (like in wikipedia). For example, I have 15pt as default and 10pt as minimum on my desktop. 10pt is really small for the post's text.

First of all, I recommend to use % for the body's font-size (which you are already using) and the rest should be set with em. That way, the body font-size will be equal to the browser default font size, and the rest of the page will be based on that size.

Another suggestion is using something like this: http://flexknowlogy.learningfield.org/2008/06/26/setting-font-size-proportional-to-window-size/

Here is an example of the js code:
function updateFontSize(){
  msg = document.body.clientWidth;

  var font_math = Math.round( 0.012 * msg * 10 );
  font_math = font_math < 100 ? 100 : font_math;

  $( "body" ).css({
      "font-size" : font_math + "%"
  });
}

Use that function on page load and page refresh:
$( window ).resize( ... )
$( document ).ready( ... )

On Wednesday, 15 February 2012 at 10:55:57 UTC, Vladimir Panteleev wrote:
> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>> On 14.02.2012 23:00, Walter Bright wrote:
>>> http://forum.dlang.org/
>>>
>>> This should replace the old miserable web interface to the forums.
>>>
>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>
>> Nice! One suggestion for improvement:  don't change the font size based on the browser window size.  I'm not a web programmer, but I'm sure someone here can suggest a better way of setting the font size.
>
> That's a tough one... This behavior is part of an effort to make the interface look good on any screen size. This doesn't include just PCs, but also mobile devices.
>
> The advantage of the current approach is that it does not rely on JavaScript - it's completely CSS-based. It's not just the font size, either - the navigation column on the left is hidden if the viewport is not wide enough, and some other sizes are adjusted.
>
> While I could use JavaScript to query the viewport window on load time and apply the adjustments only on page load, it'd have to mean relying on JavaScript, and you'd still see the font size change when you resize the window and click a link.
>
> I don't think having a "font size" JavaScript widget is a better solution. It'd mean having one canned experience optimized for one device be the default for all devices. Detecting user-agents or other complicated logic is not something I wish to go down, either.
>
> May I ask why you don't like the current behavior?

February 15, 2012
On 2012-02-15 11:55, Vladimir Panteleev wrote:
> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>> On 14.02.2012 23:00, Walter Bright wrote:
>>> http://forum.dlang.org/
>>>
>>> This should replace the old miserable web interface to the forums.
>>>
>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>
>> Nice! One suggestion for improvement: don't change the font size based
>> on the browser window size. I'm not a web programmer, but I'm sure
>> someone here can suggest a better way of setting the font size.
>
> That's a tough one... This behavior is part of an effort to make the
> interface look good on any screen size. This doesn't include just PCs,
> but also mobile devices.
>
> The advantage of the current approach is that it does not rely on
> JavaScript - it's completely CSS-based. It's not just the font size,
> either - the navigation column on the left is hidden if the viewport is
> not wide enough, and some other sizes are adjusted.

I really like this behavior but noted a couple of things. Take this for example:

http://imageshack.us/f/140/dfeediphone.png/

This is an image from the iPhone simulator. As you can see, the text in the top post overflows the design to left. The reason for this seems to be because of links that don't get wrapped. It only wraps at word boundaries and some characters like "-". These links also causes the text size to become smaller sooner then it seems to have.

An idea to fix this would be to use the CSS3 property "word-break":

http://www.w3schools.com/cssref/css3_pr_word-break.asp

An other idea, that would work for basically all browsers, would be to add zero-width spaces to the links:

http://en.wikipedia.org/wiki/Zero-width_space

-- 
/Jacob Carlborg
February 15, 2012
On Wednesday, 15 February 2012 at 12:44:22 UTC, Jacob Carlborg wrote:
> I really like this behavior but noted a couple of things. Take this for example:
>
> http://imageshack.us/f/140/dfeediphone.png/
>
> This is an image from the iPhone simulator. As you can see, the text in the top post overflows the design to left. The reason for this seems to be because of links that don't get wrapped. It only wraps at word boundaries and some characters like "-". These links also causes the text size to become smaller sooner then it seems to have.
>
> An idea to fix this would be to use the CSS3 property "word-break":
>
> http://www.w3schools.com/cssref/css3_pr_word-break.asp

It looks like it will break on any character indiscriminately, so looks like it'd need to be applied selectively. There's no way to get it to prefer breaking on whitespace/punctuation, but resort to breaking at arbitrary points otherwise?

> An other idea, that would work for basically all browsers, would be to add zero-width spaces to the links:
>
> http://en.wikipedia.org/wiki/Zero-width_space

I'm wary of magical characters because they may end up in text copied by the user. For example, what if someone posts a code sample that contains a long string of alphanumerics?
February 15, 2012
On Tue, 14 Feb 2012 17:00:05 -0500, Walter Bright <newshound2@digitalmars.com> wrote:

> http://forum.dlang.org/
>
> This should replace the old miserable web interface to the forums.
>
> Thanks to Vladimir Panteleev for an awesome job writing this!

The "Forums" link on the left points at http://digitalmars.com/NewsGroup.html for many pages (including dlang.org home page).  Please make this point at the new forum page.

Great job Vladimir!

-Steve
February 15, 2012
Am 15.02.2012 11:55, schrieb Vladimir Panteleev:
> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>> On 14.02.2012 23:00, Walter Bright wrote:
>>> http://forum.dlang.org/
>>>
>>> This should replace the old miserable web interface to the forums.
>>>
>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>
>> Nice! One suggestion for improvement: don't change the font size based
>> on the browser window size. I'm not a web programmer, but I'm sure
>> someone here can suggest a better way of setting the font size.
>
> That's a tough one... This behavior is part of an effort to make the
> interface look good on any screen size. This doesn't include just PCs,
> but also mobile devices.
>
> The advantage of the current approach is that it does not rely on
> JavaScript - it's completely CSS-based. It's not just the font size,
> either - the navigation column on the left is hidden if the viewport is
> not wide enough, and some other sizes are adjusted.
>
> While I could use JavaScript to query the viewport window on load time
> and apply the adjustments only on page load, it'd have to mean relying
> on JavaScript, and you'd still see the font size change when you resize
> the window and click a link.
>
> I don't think having a "font size" JavaScript widget is a better
> solution. It'd mean having one canned experience optimized for one
> device be the default for all devices. Detecting user-agents or other
> complicated logic is not something I wish to go down, either.

Do you know of CSS media queries? These together with some <meta> tags for mobile browsers make for a simple and powerful way to have a perfect layout on every device and resolution (on IE CSS conditionals can be used).

I would highly recommend this approach.

(Although I personally do not mind the current approach too much, apart from the fact that parts of the text do not scale)
February 15, 2012
Am 15.02.2012 15:52, schrieb Sönke Ludwig:
> Am 15.02.2012 11:55, schrieb Vladimir Panteleev:
>> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>>> On 14.02.2012 23:00, Walter Bright wrote:
>>>> http://forum.dlang.org/
>>>>
>>>> This should replace the old miserable web interface to the forums.
>>>>
>>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>>
>>> Nice! One suggestion for improvement: don't change the font size based
>>> on the browser window size. I'm not a web programmer, but I'm sure
>>> someone here can suggest a better way of setting the font size.
>>
>> That's a tough one... This behavior is part of an effort to make the
>> interface look good on any screen size. This doesn't include just PCs,
>> but also mobile devices.
>>
>> The advantage of the current approach is that it does not rely on
>> JavaScript - it's completely CSS-based. It's not just the font size,
>> either - the navigation column on the left is hidden if the viewport is
>> not wide enough, and some other sizes are adjusted.
>>
>> While I could use JavaScript to query the viewport window on load time
>> and apply the adjustments only on page load, it'd have to mean relying
>> on JavaScript, and you'd still see the font size change when you resize
>> the window and click a link.
>>
>> I don't think having a "font size" JavaScript widget is a better
>> solution. It'd mean having one canned experience optimized for one
>> device be the default for all devices. Detecting user-agents or other
>> complicated logic is not something I wish to go down, either.
>
> Do you know of CSS media queries? These together with some <meta> tags
> for mobile browsers make for a simple and powerful way to have a perfect
> layout on every device and resolution (on IE CSS conditionals can be used).
>
> I would highly recommend this approach.
>
> (Although I personally do not mind the current approach too much, apart
> from the fact that parts of the text do not scale)

just noted my answer was not quite up-to-date ;)
February 15, 2012
On 2012-02-15 15:06, Vladimir Panteleev wrote:
> On Wednesday, 15 February 2012 at 12:44:22 UTC, Jacob Carlborg wrote:
>> I really like this behavior but noted a couple of things. Take this
>> for example:
>>
>> http://imageshack.us/f/140/dfeediphone.png/
>>
>> This is an image from the iPhone simulator. As you can see, the text
>> in the top post overflows the design to left. The reason for this
>> seems to be because of links that don't get wrapped. It only wraps at
>> word boundaries and some characters like "-". These links also causes
>> the text size to become smaller sooner then it seems to have.
>>
>> An idea to fix this would be to use the CSS3 property "word-break":
>>
>> http://www.w3schools.com/cssref/css3_pr_word-break.asp
>
> It looks like it will break on any character indiscriminately, so looks
> like it'd need to be applied selectively.

Exactly, it should only be applied to links.

> There's no way to get it to
> prefer breaking on whitespace/punctuation, but resort to breaking at
> arbitrary points otherwise?

It don't think so.

>> An other idea, that would work for basically all browsers, would be to
>> add zero-width spaces to the links:
>>
>> http://en.wikipedia.org/wiki/Zero-width_space
>
> I'm wary of magical characters because they may end up in text copied by
> the user. For example, what if someone posts a code sample that contains
> a long string of alphanumerics?

It depends on where you paste it. Copying a string containing a zero-width space and pasting it in TextMate results in a visible space. If I instead paste it in TextEdit there's no visible space. I tried a few other applications as well and there was no visible space in those.

-- 
/Jacob Carlborg
February 15, 2012
"Ludovic Silvestre" <ludovic.silvestre@gmail.com> wrote in message news:yuepxdfcgjebpkkhjnny@dfeed.kimsufi.thecybershadow.net...
>

I was wondering why the text seemed to be a completely different size on different browsers!

> First of all, I recommend to use % for the body's font-size (which you are already using) and the rest should be set with em. That way, the body font-size will be equal to the browser default font size, and the rest of the page will be based on that size.
>

Yes. This.

> Another suggestion is using something like this: http://flexknowlogy.learningfield.org/2008/06/26/setting-font-size-proportional-to-window-size/
>
> Here is an example of the js code:
> function updateFontSize(){
>   msg = document.body.clientWidth;
>
>   var font_math = Math.round( 0.012 * msg * 10 );
>   font_math = font_math < 100 ? 100 : font_math;
>
>   $( "body" ).css({
>       "font-size" : font_math + "%"
>   });
> }
>
> Use that function on page load and page refresh:
> $( window ).resize( ... )
> $( document ).ready( ... )
>

That's not good (and I don't mean because of the JS - it's always possible to have non-JS fallback). This is a classic case of narrowly optimizing for one specific metric (ie, getting a consistent words-per-line) instead of always keeping an eye on the big picture. The problem this creates is that font sizes become too uncontrolled:

First of all, shrinking the window *should* re-flow the text, not cause it to be too small to read. A shorter line length is *much* better than tiny text.

Second, I tried the example:

http://jaredstein.org/resources/stein/js/fonter.html

The text on that page (when I have JS on) is so enormous, that I actually have a *very* hard time reading it. Much, much harder than reading really long lines. I have to go messing around with my browser's window size just to make it readable. I shouldn't have to do that, I've never had to do that before, and honestly, who would ever even *think* to do that?

Yea, you *could* clamp the max and min font sizes, but it's really just a goofy approach overall. There's a reason that desktop apps never scale by messing with font size. Consistent controlled font size just turns out to be more important than consistent line length. You're much better off just using the CSS "max-width" (or something like that, I forget the exact name) and maybe "min-width", both specified in em of course.

In any case, this is one of the reasons I hate the modern web. On the user's side, content and view have become completely married together. That's a *huge* step backwards. Thanks to a very large effort put into standard file formats and general computer-to-computer interop, it used to be that any content could be viewed in any program, any UI, any style, any anything the *user* wanted. We had achieved a computing golden age! But once things moved to the web, that got completely thrown out the window as interface is now inseparably *bundled* with content once again (and vice versa - content comes inseparably bundled with the interface). While model-view separation is popular among webdevs, that separation exists completely on the developer's side, not the user's side. Of course in this particular case, it's not quite so bad because there's lots of different interfaces to the same NNTP server, but still...


1 2 3 4 5 6 7 8
Top | Discussion index | About this forum | D home