web-dev-qa-db-ja.com

列内で時間を揃える方法

タイプが[Time、Decimal、Decimal]の3列のデータグリッドがあります。 decimal列のすべてのレコードの小数点以下の桁数は同じです。これらは数値であるため、私はこれらを正しく揃えました。

しかし、私は時間調整の慣習が何であるか知りません。オンラインで提案を検索しましたが、慣例がないようです。これは、日付と時刻の形式がロケールによって大幅に異なるという事実に関連しているのでしょうか。

時間の慣例はありますか？そして、そうでない場合、左揃えは非対称に見え、2つの後続の列が右揃えされているので醜く見えるので、私の場合も右揃えにするのが妥当だと思われます。

次に例を示します。

| The Time | Some decimal | Another decimal |
|    14:02 |      12.5456 |        565.4735 |
|    14:06 |      12.1043 |        568.8763 |

または

| The Time | Some decimal | Another decimal |
| 14:02    |      12.5456 |        565.4735 |
| 14:06    |      12.1043 |        568.8763 |

私のフォントは固定幅ではないことに注意してください。上記の例は、データグリッドの構造を説明するためのものです。

tablesdatesalignmenttime
13
RichK

右揃え

はい、あなたの場合は右揃えにするのが妥当です。他の日付と時刻の形式については、配置について説明できます。

Spotifyの例：

enter image description here

最大の数字は数字の数で変わる可能性があります-あなたの場合、時間、この例では分-ですが、最小はそうではありません。

したがって、右揃えは、Y軸に沿って一定のスケールを維持する簡単な方法です。つまり、表示される時間に関係なく、コロンを同じ場所に維持します。このようにして、図の値をそのすぐ上または下の図の値と直接比較できます。

考え

はい、形式は文化によって異なります。数字が何を表すかに関係なく（時間、お金、パーセンテージ、愛）、常に同じ重みの数字を揃えることが求められます。通常、これはコロンまたは小数点記号を揃えることと同じです。これは、「HH：mm」のように時間値を揃えるrightと同じです。正しい。

ただし、このメソッドはすべての日付形式で機能するわけではありません。 国際標準 を使用して、今年の3月14日は2012-03-14。数字の重みは、次の8千年の間、配置に関係なくY軸で一貫します。しかし いくつかのカルチャ では、ゼロはあちこちで省略されています。たとえば、同じ日付（パイ日）を書くと14/3/2012。ゼロが埋め込まれていない場合、これらの形式のY軸の一貫性は、配置に関係なく毎年何度も失われます。

ときどき最初のゼロから最大数を取り除くことは、最も左の時間単位の場合でも、良い考えです。リストの曲を見てください。数字を読まなくても、1つが他よりも長いことがすぐにわかります。期間（または時間）を表すために4桁を使用すると、これらの数値の値を実際に読み取って比較するために、追加のミリ秒と認知負荷が必要になります。

概要

認知負荷を減らす

  1. 同じ重さの図を揃える。これは、多くの場合、右揃えを意味します。

  2. ときどき左端の初期ゼロを削除します。

16
JOG

上記のコメントで述べたように、従来のタイポグラフィの習慣では、数値データを何らかの形式の小数区切り記号（小数点と数値、コロンと時間など）で揃えます。ワードプロセッサには長い間この機能があり、タブを並べるだけでそれを行うことができます。

残念ながら、HTML/CSSにはそのようなものはありません。

オプションでは、等幅フォントを使用します。次に、調整する側の先頭/末尾の番号が同じであることを確認してください。 （時間があれば、すべてが2分の数字になるので、右揃えになります）。

ただし、これについていくつか考えた後、HTML/CSSのプロポーショナルフォントを使用しても、小数点を揃えることができます。次に例を示します。

http://jsbin.com/imejer

HTML：

<div class="decimalNumber">
    <span class="left">1</span>.<span class="right">001</span>
</div>
<div class="decimalNumber">
    <span class="left">100</span>.<span class="right">2</span>
</div>
<div class="decimalNumber">
    <span class="left">32</span>.<span class="right">56783</span>
</div>

CSS：

.decimalNumber .left {
  display: inline-block;
  text-align: right;
  width: 5em;
}
.decimalNumber .right {
  display: inline-block;
  text-align: left;
  width: 8em;
}

そして、これはあなたが最終的に得るものです：

rendered html and css to create decimal aligned column of numbers

これをお勧めしますか？おそらく違います。追加のマークアップのチャンクになります。とはいえ、これはまだ意味的に有効であり、確かに実行可能だと思います。多分それを「愚かなHTML/CSSトリック」の箱に入れておいてください;）

補遺：

これがあなたが作成しているWebアプリであるという大きな仮定をしたことに気づきました。そうでない場合は、明らかに私のHTML/CSSソリューションを無視してください。一方、HTML/CSSベースのアプリでない場合は、CSSにはない数値配置オプションに実際にアクセスできます。

3
DA01

パーツの重要性に基づいて調整します。ほとんどの時間は秒単位で区切られ、ユーザーが1つの時間の右端の部分を次の時間の右端の部分と比較する場合は、時間を右揃えにする必要があります。時間がデータの最も有用な部分である場合、時間は左揃えにする必要があります。

0
notatoad